TA貢獻(xiàn)1995條經(jīng)驗(yàn) 獲得超2個(gè)贊
不要在視圖中使用它，使用 acomputed來(lái)獲取您想要的數(shù)據(jù)。然后您可以使用<template>標(biāo)簽來(lái)控制顯示哪些元素，這樣您就不需要將元素包裝到單個(gè) DOM 元素中。
computed下面是一個(gè)示例，它顯示了為然后可以迭代的數(shù)組生成數(shù)組的直接方法。
Vue.createApp({
data() {
return {
messages: [{
username: 'john',
message: 'hi'
},
{
username: 'john',
message: 'there'
},
{
username: 'bob',
message: 'hello'
},
{
username: 'john',
message: 'whats up'
}
]
}
},
computed: {
byUser() {
const arr = [];
let tempName = null;
let tempGroup = {}
this.messages.forEach(m => {
if (tempName !== m.username) {
tempGroup = {
username: m.username,
messages: []
}
arr.push(tempGroup);
}
tempGroup.messages.push(m.message);
tempName = m.username;
})
return arr;
}
}
}).mount("#app")
<script src="https://unpkg.com/vue@next/dist/vue.global.prod.js"></script>
<div id="app" class="container">
<template v-for="(m, i) in byUser">
<h2>
{{ m.username }}
</h2>
<p v-for="message in m.messages">
{{ message }}
</p>
<hr>
</template>
</div>
舉報(bào)