说明
我们常常会在vue组件中会遇到v-if和v-for这两个指令碰到一起运用的情况，虽然我们知道这两个指令不能放一起，但有时也会弄错。所以在这里做个详细说明以作提醒。解决方法，一般会是用到template这个元素去解决这个问题
template？
关于这个单独的标签解释：template标签，HTML5提供的新标签，更加规范和语义化 ；可以把列表项放入template标签中，然后进行批量渲染，先拿个代码解释下
<template id="tem">
<div id="app">
<h1 id="title">
hello world
</h1>
</div>
</template>
<script>
let tem = document.getElementById('tem');
console.log(tem);
console.log(tem.innerHTML);
let title = tem.content.getElementById('title')
console.log(title)
</script>
在浏览器中，我们并没发现这个标签渲染出任何消息，因为这个标签天生被设置了display:none的属性，所以通过
let tem = document.getElementById('tem');
console.log(tem);
显示的结果为
所以要通过.content的属性才能访问到
在vue中的作用
在官网中也没做过详细说明，其实就是元素是被当做一个不可见的包裹元素，主要用于分组的条件判断和列表渲染。 官方文档中是这样说明的
- “条件渲染”，其中的章节——在元素上使用v-if条件渲染分组
- “条件渲染”——用key管理可复用的元素
- “条件渲染”——v-show
- “列表渲染”——v-for on a
- “列表渲染”——v-for with v-if
所以template就是方便v-if与v-for两者组合使用的最好方法。
当然有更好的解决方法，可以在留言评论区一起讨论，一起学习进步哟~
