如何在vue项目中使用template标签

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

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

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

<div id="app">
 <!--此处的template标签中的内容显示并且在dom中不存在template标签-->
 <template>
 <div>我是template</div>
 <div>我是template</div>
 </template>
</div>
<!--此处的template标签中的内容在页面中不显示，但是在dom结构存在该标签及内部结构-->
<template id="tem">
 <div id="div1">我是template</div>
 <div>我是template</div>
</template>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
 let vm = new Vue({
 el: "#app",
 });
</script>

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

<div id="app">
 <template v-if="true">
 <!--此时template标签中的内容显示在页面上，但是看dom结构没有template标签-->
 <div>我是template</div>
 <div>我是template</div>
 </template>
 <div v-if="true">
 <!--此时页面上显示div标签中的内容，并且看dom结构存在最外面的div标签-->
 <div>我是template</div>
 <div>我是template</div>
 </div>
 <!--此处会输出6个‘我是template'并且dom结构中不存在template标签-->
 <template v-for="a in 3">
 <div>我是template</div>
 <div>我是template</div>
 </template>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
 let vm = new Vue({
 el: "#app",
 });
</script>

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中定义的数据。

<!--此处页面显示hello-->
<div id="app"></div>
<!--此处template标签必须在vue绑定的元素外面定义，并且在页面中不显示下面的template标签中的内容-->
<template id="first">
 <div v-if="flag">{{msg}}<div>
 <div v-else>111<div>
</template>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
 let vm = new Vue({
 el:"#app",
 data:{
  msg:"hello",
  flag:true
 },
 template:"#first"//通过该属性可以将自定义的template属性中的内容全部替换app的内容，并且会覆盖里面原有的内容，并且在查看dom结构时没有template标签
 });
</script>

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

<abc id="first">
 <div v-if="flag">{{msg}}<div>
 <div v-else>111<div>
</abc>

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

<!--此处页面显示hello-->
<div id="app"></div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
 let vm = new Vue({
 el:"#app",
 data:{
  msg:"hello",
  flag:true
 },
 template:"<div v-if='flag'>{{msg}}</div><div v-else>123</div>"//模板中只能有一个根元素，如果有多个需要使用v-if、v-else、v-else-if来选择显示哪一个
 });
</script>

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