vue中的template标签

小鱼儿 2023-06-12 04:23 14阅读 0赞

**1.template标签，HTML5提供的新标签，更加规范和语义化 ；可以把列表项放入template标签中，然后进行批量渲染**

**2.在非单组件文件的vue.js的程序里，常会见到一个标签，似乎在官网上也没有专门讲到这个标签。**  
  
**那这个到底是什么玩意？**

**实际上 元素是被当做一个不可见的包裹元素，主要用于分组的条件判断和列表渲染。**

具体情况见官方文档：  
[1、“条件渲染”，其中的章节——在元素上使用v-if条件渲染分组][1_v-if]  
![这里写图片描述][70]  
[2、“条件渲染”——用key管理可复用的元素][2_key]  
![这里写图片描述][70 1]  
![这里写图片描述][70 2]  
[3、“条件渲染”——v-show][3_v-show]  
![这里写图片描述][70 3]  
[4、“列表渲染”——v-for on a ][4_v-for on a]  
![这里写图片描述][70 4]  
[5、“列表渲染”——v-for with v-if][5_v-for with v-if]  
![这里写图片描述][70 5]

[1_v-if]: https://cn.vuejs.org/v2/guide/conditional.html#%E5%9C%A8-lt-template-gt-%E5%85%83%E7%B4%A0%E4%B8%8A%E4%BD%BF%E7%94%A8-v-if-%E6%9D%A1%E4%BB%B6%E6%B8%B2%E6%9F%93%E5%88%86%E7%BB%84
[70]: /images/20230531/6d6c2bd7b021459a9a317c98e4d43914.png
[2_key]: https://cn.vuejs.org/v2/guide/conditional.html#%E7%94%A8-key-%E7%AE%A1%E7%90%86%E5%8F%AF%E5%A4%8D%E7%94%A8%E7%9A%84%E5%85%83%E7%B4%A0
[70 1]: /images/20230531/067d2bb26c0c421ba6199ad960a0304c.png
[70 2]: /images/20230531/32fe78060e9744e684a652058a39c965.png
[3_v-show]: https://cn.vuejs.org/v2/guide/conditional.html#v-show
[70 3]: /images/20230531/b50111f353e34b81be9eabcf26a3bc6a.png
[4_v-for on a]: https://cn.vuejs.org/v2/guide/list.html#v-for-on-a-lt-template-gt
[70 4]: /images/20230531/5062474bfc91474bb796de7bb3fa4437.png
[5_v-for with v-if]: https://cn.vuejs.org/v2/guide/list.html#v-for-with-v-if
[70 5]: /images/20230531/470529ed3a0248c882652061be9994b1.png