>[success] # v-if 和v-for >[danger] ##### 2.x ~~~ 1.2.x 版本中在一个元素上同时使用 v-if 和 v-for 时，v-for 会优先作用。 ~~~ >[danger] ##### 3.x ~~~ 1.v-if 的优先级比 v-for 更高，这意味着 v-if 将没有权限访问 v-for 里的变量： ~~~ ~~~ <!-- 因为v-if 的优先级高此时v-for 产生的todo还不存在 因此会报错 --> <li v-for="todo in todos" v-if="!todo.isComplete"> {{ todo }} </li> ~~~ * 可以这么修改 ~~~ <template v-for="todo in todos"> <li v-if="!todo.isComplete"> {{ todo }} </li> </template> ~~~ ~~~ 1.上面的写法依旧不是一个很好的做法，建议在使用计算属性，在计算属性中将需要的值进行过滤掉 ~~~ [v-if 与 v-for 的优先级对比非兼容](https://v3.cn.vuejs.org/guide/migration/v-if-v-for.html#%E6%A6%82%E8%A7%88)