v-for和v-if一起使用

在Vue.js中，v-for和v-if可以一起使用以过滤循环渲染的元素。

例如，如果我们有一个包含项目的列表，并且我们只想显示已完成的项目：

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

在上面的代码中，v-for用于循环渲染项目列表，而v-if用于仅渲染已完成的项目。这将过滤掉未完成的项目，并只显示已完成的项目。

需要注意的是，如果我们只是想在已完成的项目中使用v-for而不是在整个列表中使用，我们可以将v-if移至li元素内部，并使用计算属性来过滤项目。例如：

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

computed: {
  completedItems() {
    return this.items.filter(item => item.completed)
  }
}

在上面的代码中，我们使用计算属性completedItems来过滤items数组中的已完成项目。然后，我们在v-for指令中使用completedItems而不是items，以便只在已完成的项目中使用v-for循环。