1、提示:指令v-if和v-for不能用在同一个标签上,否则性能会消耗很大。
2、原因:如果写在同一标签,会先对所有数据进行以下操作,就是一边循环一边执行v-if,循环中多次对 DOM 元素进行添加或删除,这样会造成大量的性能消耗
3、优先级:v-for 优先级 高于v-if
<div v-for="(item, index) in dataList" :key="index">
<div v-if="item.status">
{{item.name}}
</div>
</div>
4、解决办法
1.不要把v-for和v-if 写在同一个标签上,而是新建div引入v-for包裹v-if
2.使用v-show代替v-if
原文出处:http://www.dongblog.com/notes/29.html
来源:博客网 转载请注明出处!