Vue.js：我可以使用 v-if 创建组件吗？

Question

我是前端开发的新手，正在尝试学习 Vue.js。 假设我有一个数组

fruits = ["New York", "Chicago", "London"]

我有一个名为 FruitPrices 的组件，它可以像这样工作：

<FruitPrices fruit="London"></FruitPrices>

我想知道是否可以使用 v-if 创建多个组件？ 类似于以下内容：

<div v-for="item in fruits" : key="item">
    <FruitPrices fruit="item"></FruitPrices>
</div>

这段代码不起作用，所以我想知道是否有任何有 Vue 经验的人可以帮我一把！

Answer 1

在 Vue Js 中进行循环时，需要有一个键。 例如，如果你有fruits = [{id:1, name: London}, {id:2, name: New York}]你可以做v-for="item in fruits":key="item.id"但是因为你没有它，所以最好的选择是下面的一个：

<div v-for="(item, index) in fruits"  :key="index">
    <FruitPrices fruit="item"></FruitPrices>
</div>

Vue js 会将索引视为数组中每个项目的 position

Answer 2

<FruitPrices fruit:"item" v-for="(item,index) in fruits" :key="index">
</FruitPrices>

您可以在组件标签中使用 v-for

Answer 3

这是您的组件：

<template>
  <div>
    <div v-for="item in fruits" :key="item">
      <FruitPrices :fruit="item"></FruitPrices>
    </div>
  </div>
</template>
<script>
import FruitPrices from "../somePlace/FruitPrices";
export default {
  components: { FruitPrices },
  data: () => ({ fruits: ["New York", "Chicago", "London"] })
}
</script>

在这一行<FruitPrices fruit="item"></FruitPrices>你必须使用:在fruit prop之前，因为你不是传递一个字符串，而是一种变量，

<FruitPrices:fruit="item"></FruitPrices>

你已经准备好展示每个城市的水果价格了！

顺便说一句，与您有关 v-if 的问题有关，将 v-if 与 v-for 一起使用并不是一种好的过滤方法，最好的方法是使用计算属性。