如何在vue项目中使用template标签-创新互联

今天就跟大家聊聊有关如何在vue项目中使用template标签,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。

站在用户的角度思考问题,与客户深入沟通,找到黄浦网站设计与黄浦网站推广的解决方案,凭借多年的经验,让设计与互联网技术结合,创造个性化、用户体验好的作品,建站类型包括:成都网站制作、成都网站设计、企业官网、英文网站、手机端网站、网站推广、域名注册、网络空间、企业邮箱。业务覆盖黄浦地区。

 1、template标签在vue实例绑定的元素内部

它是可以显示template标签中的内容,但是查看后台的dom结构不存在template标签。如果template标签不放在vue实例绑定的元素内部默认里面的内容不能显示在页面上,但是查看后台dom结构存在template标签。


 
 
 我是template
 
我是template

注意: vue实例绑定的元素内部的template标签不支持v-show指令,即v-show="false"对template标签来说不起作用。但是此时的template标签支持v-if、v-else-if、v-else、v-for这些指令。


 
 
 
我是template
 
我是template
       
我是template
 
我是template
 
     
我是template
 
我是template
 

2、vue实例中的template属性

将实例中template属性值进行编译,并将编译后的dom替换掉vue实例绑定的元素,如果该vue实例绑定的元素中存在内容,这些内容会直接被覆盖。
特点:

1)如果vue实例中有template属性,会将该属性值进行编译,将编译后的虚拟dom直接替换掉vue实例绑定的元素(即el绑定的那个元素);
2)template属性中的dom结构只能有一个根元素,如果有多个根元素需要使用v-if、v-else、v-else-if设置成只显示其中一个根元素;
3)在该属性对应的属性值中可以使用vue实例data、methods中定义的数据。




 {{msg}}
 111

上面的例子中html中的template标签可以变成自定的标签,如下。但是下面这种方式也可以将标签中的内容替换掉app元素,但是标签中的内容也会显示在页面上。所以此处利用template标签来定义vue实例中需要设置的template属性。


 {{msg}}
 111

上面的实例还可以写成下面的形式




看完上述内容,你们对如何在vue项目中使用template标签有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注创新互联行业资讯频道,感谢大家的支持。


本文名称:如何在vue项目中使用template标签-创新互联
URL地址:http://scyanting.com/article/ghgdg.html

其他资讯