vue中v-for和v-if同时使用的解决办法

        在一个列表中，如果同时要遍历，并且根据某个条件控制某个列表项是否显示，如下代码是错误的：

<ul><li v-for="item in list" v-if="item.show" :key="item.id">{{item.name}}</li>
</ul>

        当v-if和v-for同时存在于一个节点上时，v-if 比 v-for 的优先级更高。这意味着 v-if 的条件将无法访问到 v-for 作用域内定义的变量别名。 也就是无法访问item。

        如果需要这种功能，中间加入一层template即可解决：

<ul><template  v-for="item in list" :key="item.id"><li v-if="item.show">{{item.name}}</li></template>
</ul>