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

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

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

我有一个名为“水果价格”的组件，其工作原理如下：

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

我想知道是否可以使用v-if来创建多个组件？ 大致如下：

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

此代码不起作用，因此我想知道是否有经验的Vue人员可以帮助我

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

---

在Vue Js中执行循环时，可以使用v-for-in-component标记，它需要一个键。例如，如果您有

fruits=[{id:1，name:London}，{id:2，name:newyork}]

您可以做

v-For=“水果中的项目”：key=“item.id”

但因为你没有，最好的选择是：

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

---

VUE JS将考虑索引作为数组中每个项目的位置< /p> 这里是您的组件：

<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}，
数据：（）=>（{fruits:[“纽约”、“芝加哥”、“伦敦”]}）
}

在这一行

中，您必须在

水果

属性之前使用

：

，因为您传递的不是字符串，而是一种变量

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

---

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

什么是

[纽约、芝加哥、伦敦]

“纽约”，等等？数组不能有带空格的变量，或者它需要双qoutes。城市中的价格/水果数据！