v-for与v-if、组件

v-for与v-if

v-if和v-for是不建议一起使用的，当它们处于同一节点时，v-if的优先级比v-for更高，这意味着v-if将没有权限访问v-for里的变量。

可以把v-for移动到<template>标签中来修正这个问题：

1
2
3
4
5
6
7



<template v-for="todo in todos" :key="todo.name">
    <li v-if="!todo.isComplete">
        {{todo.name}}
    </li>
</template>

这应该是一种模板写法，直接记下就好。

在自定义组件上，可以像在任何普通元素上一样使用v-for。然而，任何数据都不会被自动传递到组件里，因为组件有自己独立的作用域（这个很好理解）。为了把迭代数据传递到组件里，我们需要使用props：

1
2
3
4
5
6
7
8



<my-component
    v-for="(item, index) in items"
    :item="item"
    :index="index"
    :key="item.id"
></my-component>