本文主要介绍模板标签的用法(包括在vue中的用法总结)。这篇文章给大家讲的很详细，对大家的学习或者工作都有一定的参考价值。请有需要的朋友参考。
目录
一. html5 II中的模板标签。模板标签操作的属性和方法。vue中的template1，vue实例2绑定的元素内部的template标签。vue实例中的模板属性
一、html5中的template标签
html中的模板标记中的内容不会显示在页面中。但是，模板标签存在于后台查看的页面的DOM结构中。这是因为模板标签本来就是不可见的，它设置了display:none；属性。
！-当前页面只显示内容'我是自定义表达式abc '而非'我是模板'，因为模板标签天生不可见-
Templatediv'm模板/div/template。
我是自定义性能abc/abc
二、template标签操作的属性和方法
属性：在js中，模板标签对应的dom对象有content属性，对应的属性值是一个dom节点，节点的nodeName是#document-fragment。通过这个属性，你可以得到模板标签中的内容，以及模板对象。内容可以调用getElementById、querySelector和QuerySelector方法来获取内部的子节点。
Innerhtml:你可以在模板标签中获取html。
模板id='项目'
Div id='div1 '我是模板/div
我是模板/div。
/模板
脚本
设o=document . getelementbyid(' tem ')；
console . log(o . content . nodename)；//#文档片段
console . log(o . content . query selectorall(' div '))；//NodeList(2) [div#div1，div].获取类的数组。
console . log(o . content . getelementbyid(' div 1 '))；//div id='div1 '我是template/div。
console . log(o . innerhtml)；//'div id='div1 '我是模板/divdiv我是模板/div '
/脚本
三、vue中的template
1、template标签在vue实例绑定的元素内部
它可以显示模板标签中的内容，但是后台的dom结构中没有模板标签。如果template标签没有放在vue实例绑定的元素里面，默认情况下里面的内容不能显示在页面上，但是查看后台dom结构的时候template标签是存在的。
div id='应用程序'
！-此处显示模板标记中的内容，而dom中没有模板标记-
模板
我是模板/div。
我是模板/div。
/模板
/div
！-这里的模板标签中的内容不在页面中显示，但是标签和内部结构存在于dom结构中-
模板id='项目'
Div id='div1 '我是模板/div
我是模板/div。
/模板
脚本src=' node _ modules/vue/dist/vue . js '/script
脚本
让vm=new Vue({
埃尔：' #app '，
});
/脚本
注意：Vue实例绑定的元素内的模板标记不支持v-show指令，即v-show='false '对模板标记没有影响。然而，此时模板标签支持诸如v-if、v-else-if、v-else和v-for之类的指令。
div id='应用程序'
模板v-if='true '
！-此时，模板标签中的内容显示在页面上，但dom结构没有模板标签-
我是模板/div。
我是模板/div。
/模板
div v-if='true '
！-此时，div标签中的内容显示在页面上，dom结构有最外面的div标签-
我是模板/div。
我是模板/div。
/div
！-6“我是模板”将在此处输出，并且dom结构中没有模板标记-
模板v-for='a in 3 '
我是模板/div。
我是模板/div。
/模板
/div
脚本src=' node _ modules/vue/dist/vue . js '/script
脚本
让vm=new Vue({
埃尔：' #app '，
});
/脚本
2、vue实例中的template属性
编译实例中的模板属性值，用编译后的dom替换vue实例绑定的元素。如果vue实例绑定的元素中有内容，这些内容将被直接覆盖。
特点：
1)如果vue实例中有模板属性，则编译属性值，编译后的虚拟dom直接替换vue实例绑定的元素(即el绑定的元素)；2)模板属性中的dom结构只能有一个根元素。如果有多个根元素，应该设置v-if、v-else和v-else-if只显示其中一个；vue实例数据和方法中定义的数据可以用在该属性对应的属性值中。
！-这里页面显示你好-
div id='app'/div
！-这里模板标签必须定义在vue绑定的元素之外，后面模板标签中的内容不会显示在页面中-
模板id='第一个'
div v-if=' flag ' { msg } } div
div v-else111div
/模板
脚本src='。/node _ modules/vue/dist/vue . js '/script
脚本
让vm=new Vue({
埃尔：' #app '，
数据：{
消息：“你好”，
标志：正确
},
模板：' #first'//有了这个属性，自定义模板属性中的所有内容都可以替换app的内容，原来的内容会被覆盖。查看dom结构时没有模板标签。
});
/脚本
上面例子中html中的模板标签可以变成一个定制标签，如下所示。但是，下面的方法也可以用app元素替换abc/abc标签中的内容，但是abc/abc标签中的内容也会显示在页面上。因此，这里使用template标记来定义需要在vue实例中设置的模板属性。
abc id='first '
div v-if=' flag ' { msg } } div
div v-else111div
/abc
上面的例子也可以写成下面的形式
！-这里页面显示你好-
div id='app'/div
脚本src='。/node _ modules/vue/dist/vue . js '/script
脚本
让vm=new Vue({
埃尔：' #app '，
数据：{
消息：“你好”，
标志：正确
},
模板：' div v-if=' flag“{ msg } }/div div v-else 123/div '/模板中只能有一个根元素。如果有多个，使用v-if、v-else、v-else-if来选择显示哪个。
});
/脚本
关于详细解释template标签用法的这篇文章到此为止(包括vue中的用法总结)。有关模板标签用法的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。