codecamp

Vue 3.0 v-if与v-for的优先级对比

#概览

  • 非兼容:两者作用于同一个元素上时,v-if 会拥有比 v-for 更高的优先级。

#介绍

Vue.js 中使用最多的两个指令就是 v-ifv-for,因此开发者们可能会想要同时使用它们。虽然不建议这样做,但有时确实是必须的,于是我们想提供有关其工作方式的指南。

#2.x 语法

2.x 版本中在一个元素上同时使用 v-ifv-for 时,v-for 会优先作用。

#3.x 语法

3.x 版本中 v-if 总是优先于 v-for 生效。

#迁移策略

由于语法上存在歧义,建议避免在同一元素上同时使用两者。

比起在模板层面管理相关逻辑,更好的办法是通过创建计算属性筛选出列表,并以此创建可见元素。

Vue 3.0 v-model
Vue 3.0 v-bind合并行为
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

Vue.js 3.0 风格指南

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }