Question

我有一个格式类似于

的JS数组

[{type:'text', data: 'some text'},{type: 'image',  data: 'link/to/image'}]

对于type的不同值，我具有不同的vue分量（<text-block>，<image-block>），并且我想使用v-for遍历此数组并基于类型，创建合适的vue组件。

v-for的示例显示创建相同元素的次数与许多<li>相同。有没有办法在v-for中创建不同的元素？

Answer 1

您可以只使用v-if：

<div v-for="(loop, index) in loops" :key="index">
    <text-block v-if="loop.type === 'text'"></text-block>
    <image-block v-if="loop.type === 'image'"></image-block>
</div>

您还可以使用动态组件：

<div v-for="(loop, index) in loops" :key="index">
    <component :is="loop.type + '-block'"></component>
</div>

确保已导入组件并在实例上定义了它们。

Answer 2

您可以执行以下操作，例如在数组中列出电影列表：

<div id="app">
<ul>
<li v-for="movie in movies">{{ movie }}</li>
</ul>
</div>
<script>

var app = new Vue({

el: '#app',
data: {
  movie: ['some movie 1', 'movie 2', 'idk movies man']
}

});

setTimeout(function() {
app.movies.push('random movie');

}, 2000);

</script>

根据v-for中的条件添加vue组件

2 个答案: