v-for 的优先级比

v-for的优先级比v-if高。 如果您想在具有v-for指令的元素上使用v-if，则必须使用计算属性或方法来过滤数组。 下面是一个例子，其中v-for和v-if指令一起使用，以根据条件过滤数组：

<ul>
  <li v-for="item in filteredItems" v-if="item.isActive">
    {{ item.name }}
  </li>
</ul>

data() {
    return {
      items: [
        { name: 'John', isActive: true },
        { name: 'Jane', isActive: false },
        { name: 'Jim', isActive: true },
      ]
    }
  },
computed: {
    filteredItems() {
      return this.items.filter(item => item.name.indexOf('J') === 0)
    }
  },

上面的例子中，只有items中name以J开头并且isActive为true的数据才会显示。