如何在vue项目中使用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标签有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注创新互联行业资讯频道，感谢大家的支持。

• 建站热线：13518219792
• 
  微信扫一扫在线咨询
• QQ客服：
• 案 例
• 价 格