v-for高于v-if
<p v-for="item in list" v-if="bol">
<span>{{item.name}}</span>
</p>
<p v-for="item in list" v-else >
<span>{{item.name}}</span>
</p>
当你改变bol=false时,是不是觉得应该只显示第二个p的内容,但实际上第一个内容也显示了。这就是当v-if和v-for 在同一个标签内一同使用时,v-for的优先级高的原因。此时,解决的方法就是在p外面再套一层div标签,在div上使用v-if即可
<div v-if="bol">
<p v-for="item in list" >
<span>{{item.name}}</span>
</p>
</div>
<div v-else>
<p v-for="item in list" >
<span>{{item.name}}</span>
</p>
</div>