网站建设培训学校北京,如何搜索网站,wordpress 标题关键词,网站建设技术发展趋势预测vue2-v-if和v-for的优先级
1.v-if和v-for的作用
v-if是条件渲染#xff0c;只有条件表达式true的情况下#xff0c;才会渲染v-for是基于一个数组来渲染一个列表#xff0c;在v-for的时候#xff0c;保证给每个元素添加独一无二的key值#xff0c;便于diff算法进行优化
…vue2-v-if和v-for的优先级
1.v-if和v-for的作用
v-if是条件渲染只有条件表达式true的情况下才会渲染v-for是基于一个数组来渲染一个列表在v-for的时候保证给每个元素添加独一无二的key值便于diff算法进行优化
div v-ififShow/div
p v-foritem in items :keyitem.id{{item}}/p2. 优先级
优先级是为了讨论先执行v-for还是先执行v-if那就有两种情况v-if和v-for在同一个元素上和不同的元素上
2.1 同一个元素上的v-if和 v-for的优先级
div v-ifisShow v-foritem in items :keyitem.id{{ item.name}}/div
scriptconst appnew Vue({el:#app,data(){return{items:[{id:1,name:tom},{id:2,name:tony}]}},computed:{ifShow(){return this.items this.items.length0}}})
/script这种情况下v-for的优先级高于v-if也就是先执行v-for在执行v-if.这种情况下就会造成性能的浪费
2.1 不同标签上的v-if和v-for
div v-ififShowp v-foritem in items :keyitem.id{{ item.name}}/p
/div这种情况下v-if优先级高于v-for
3. 总结
在VUE2中当v-if和v-for同时出现时v-for的优先级更高所以最好不要同时出现但在VUE3中当v-if和v-for同时出现时v-if的优先级更高
