假设我的 vue 状态中有一个如下所示的对象数组：
2
943[
{name: "Daniel", default: false},
{name: "Ross", default: true},
{name: "Rachel", default: false},
{name: "Joey", default: false}
{name: "Monica", default: true}
{name: "Gunther", default: true}
]
在我的网页上，所有这些名称都已显示在列表中。我想在网页上显示的内容如下：
从上面的例子中，我认为我想要实现的目标非常清楚。在 vue 中实现此目的最简单的方法是什么？
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
尝试使用
compulated属性。检查下面的代码片段var app = new Vue({ el: '#app', data() { return { list: [ {name: "Daniel", default: false}, {name: "Ross", default: true}, {name: "Rachel", default: false}, {name: "Joey", default: false}, {name: "Monica", default: true}, {name: "Gunther", default: true}, ] }; }, computed: { getList() { let index = 1; return this.list.map(item => { return item.default ? `${item.name} - Default ${index++}` : `${item.name}`; }); } } })您可以使用 Array.map 迭代所有数组元素并生成您想要的结果
const data = [ { name: "Daniel" , default: false }, { name: "Ross" , default: true }, { name: "Rachel" , default: false }, { name: "Joey" , default: false }, { name: "Monica" , default: true }, { name: "Gunther", default: true } ]; let defaultCount = 0; const res = data.map(item => `${item.name}${item.default? ` default ${++defaultCount}`:''}`) console.log(res)