列表渲染v-for-v-if
- 同时使用 v-if 和 v-for 是不推荐的,因为这样二者的优先级不明显。
- 当它们同时存在于一个节点上时,v-if 比 v-for 的优先级更高。
- 这意味着 v-if 的条件将无法访问到 v-for 作用域内定义的变量别名:
1. 这会抛出一个错误,因为属性 todo 此时没有在该实例上定义
<template>
<li v-for="todo in obj" v-if="!todo.done">
{{ todo.name }}
</li>
</template>
<script setup>
import { ref, reactive, computed } from "vue";
const obj = reactive(
{
name: '张三',
age: '18',
done: true
},
{
name: '王五',
age: '20',
done: false
},
)
</script>
2. 在外新包装一层 <template>
再在其上使用 v-for 可以解决这个问题 (这也更加明显易读):
<template v-for="todo in obj">
<li v-if="!todo.done">
{{ todo.name }}
</li>
</template>
</template>