如何使v-for返回一个单词加上前一个单词vue

Question

下午好，我正在用vue练习，如何让for循环逐字逐句地返回我，再加上前一个。

<div v-for="option in this.options.split(' ')" :key="tag" >
<h2>{{option}}</h2>
</div>
data() {
return {
options:'the green house'
}
},

现在返回

the 
green
house

我想让你退回

the
the green
the green house

我该怎么做？

Answer 1

您应该创建一个computed属性，以避免模板与逻辑混淆。然后，可以使用split、map、slice和join。

演示：

new Vue({
el: '#app',
data() {
return { options: 'the green house' };
},
computed: {
optionsArray() {
return this.options.split(' ')
.map((_, i, arr) => arr.slice(0, i + 1).join(' '));
}
},
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.21/vue.min.js"></script>
<div id="app">
<div>
<div v-for="option in optionsArray" :key="option">
<h2>{{option}}</h2>
</div>
</div>
</div>

Answer 2

您可以创建一个computed属性，该属性返回预期列表，如下所示：

new Vue({ 
el:"#app", 
data: () => ({ options: 'the green house' }),
computed: {
myOptions() {
const list = this.options.split(' ');
return list.map((option, i) => list.slice(0, i+1).join(' '));
}
}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div v-for="(option, index) in myOptions" :key="index">
<h2>{{option}}</h2>
</div>
</div>