如何在列表中使用计算属性。我正在使用VueJS v2.0.2。
这是HTML:
<div id="el">
<p v-for="item in items">
<span>{{fullName}}</span>
</p>
</div>
这是Vue代码:
var items = [
{ id:1, firstname:'John', lastname: 'Doe' },
{ id:2, firstname:'Martin', lastname: 'Bust' }
];
var vm = new Vue({
el: '#el',
data: { items: items },
computed: {
fullName: function(item) {
return item.firstname + ' ' + item.lastname;
},
},
});
您不能为每次迭代创建一个计算属性。理想情况下,每个组件
items
都是它们自己的组件,因此每个组件都可以具有自己的fullName
计算属性。如果不想创建
user
组件,可以做的是使用方法代替。您可以fullName
从computed
属性右移到methods
,然后可以像这样使用它:另外,请注意,如果您发现自己需要将参数传递给a
computed
,则可能需要使用方法。