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

以下是您的组件：

<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属性之前使用:，因为您传递的不是字符串，而是一种变量，

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

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

顺便说一下，与你关于v-if的问题有关，使用v-if和v-for不是过滤的好方法，最好的方法是使用计算属性。

Answer 2

在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将把index作为数组中每一项的位置。

Answer 3

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

可以在元件标记中使用v-for