Javascript VueJS如何将计算属性与v-for一起使用

如何在列表中使用计算属性。我正在使用VueJS v2.0.2

以下是HTML：

<div id="el">
    <p v-for="item in items">
        <span>{{fullName}}</span>
    </p>
</div>

---

不能为每个迭代创建计算属性。理想情况下，这些

项中的每一项都将是它们自己的组件，因此每个项都可以有自己的
全名
计算属性

如果您不想创建
用户
组件，那么您可以使用一种方法。您可以将
fullName
从
computed
属性向右移动到
methods
，然后可以像这样使用它：

{{ fullName(user) }}

另外，请注意，如果您发现自己需要将参数传递给
computed
，您可能需要一个方法来代替。
这里缺少的是
items
是一个数组，它包含所有项，但是
computed
是一个
全名，它无法表示
项目中的所有
全名。试试这个：

var vm = new Vue({
    el: '#el',
    data: { items: items },
    computed: {
        // corrections start
        fullNames: function() {
            return this.items.map(function(item) {
                return item.firstname + ' ' + item.lastname;
            });
        }
        // corrections end
    }
});

然后在视图中：

<div id="el">
    <p v-for="(item, index) in items">
        <span>{{fullNames[index]}}</span>
    </p>
</div>



{{全名[索引]}


Bill介绍的方法确实有效，但我们可以使用计算道具来实现，我认为在迭代中，它比
方法
更好，尤其是当应用程序变得更大时。另外，在某些情况下，
computed
比
method
的性能有所提高：
我喜欢潘俊杰发布的解决方案潘俊杰. 它只在
this.items
上迭代一次（在组件创建阶段），然后缓存结果，从而成为问题的核心。这当然是使用计算道具而不是方法的关键好处

computed: {
    // corrections start
    fullNames: function() {
        return this.items.map(function(item) {
            return item.firstname + ' ' + item.lastname;
        });
    }
    // corrections end
}




{{fullNames[item.id]}


注意：上面的示例假设
item.id
是唯一的，例如来自典型的数据库输出。
可以添加另一个v-for，该v-for在一个项目长列表中迭代：

<div id="el">
    <p v-for="item in items">
        <template v-for="fullName in [item.firstName + ' ' + item.lastName]">
            <span>{{fullName}}</span>
        </template>
    </p>
</div>



{{fullName}}


不太好，但这正是您要寻找的：一个围绕该跨度的对象，它有一个名为fullName的属性，该属性包含该特定值

它不仅仅是一个虚荣的特性，因为我们可能需要在多个地方使用该值，例如：

<span v-if="...">I am {{fullName}}</span>
<span v-else-if="...">You are {{fullName}}</span>
<span v-else>Who is {{fullName}}?</span>

我是{{fullName}
你是{{fullName}
谁是{{fullName}}？

我的用例是在v-for循环中构造日期（是的，另一个日历），如：


对{{day.getYear（）}和
{{day.getMonth（）}}等。

（为了简洁起见，我省略了
：key=“whatever”
设置）

我承认，最好的方法是将其移动到一个单独的组件，但是如果我们像这样为每两个liner创建一个新组件，并且只在这个地方使用该组件，那么我们只会污染另一个名称空间

也许一个
v-let=“day as new Date（…）”
指令在这方面会很方便。
我用它来突出显示
：class
指令中的一行，效果比方法好。这不太便于移植。如果您想查看
项的排序副本
并获取全名，则此操作将失败。真正应该做的是一个“用户”组件，它接受一个具有全名计算属性的用户对象。当对
项进行排序时，为什么它会失败@BillCriswell如果您要执行
v-for=“SortedVersionFitems中的项目”
则
索引将关闭。如果您需要多次使用全名，并且全名方法是一个复杂的函数，每次迭代执行10次将非常昂贵，该怎么办？我认为@PanJunie的解决方案在这种情况下会更好。老实说，我会在州的高层做这件事。如果您正在处理项目的排序版本，下面的计算方法将中断。我在这里绝对是为了安全。对我来说，让数据在更高的层次上尽可能地可重用对我来说更有意义。我的问题是，阵列可以根据被选择和取消选择的其他项目进行更改，这会触发阵列本身的反应性，因此我不认为我真的可以在更高的层次上进行更改，除了可能创建一个过滤器并在该点向数组中的对象添加其他属性之外（这不是一个糟糕的想法，但只会导致在数组中循环一个加法来完成所有这一切-我想两次要比十次好）。
computed: {
    fullNames() {
        return this.items.reduce((acc, item) => {
            acc[item.id] = `${item.firstname} ${item.lastname}`;
            return acc;
        }, {});
    },
},

<p v-for="item in items" :key="`person-${item.id}`">
    <span>{{ fullNames[item.id] }}</span>
</p>

<div id="el">
    <p v-for="item in items">
        <template v-for="fullName in [item.firstName + ' ' + item.lastName]">
            <span>{{fullName}}</span>
        </template>
    </p>
</div>

<span v-if="...">I am {{fullName}}</span>
<span v-else-if="...">You are {{fullName}}</span>
<span v-else>Who is {{fullName}}?</span>

<v-row v-for="r in 5">
    <v-col v-for="c in 7">
        <template v-for="day in [new Date(start.getTime() + 24*60*60*1000*((c-1) + 7*(r-1)))]">
            <span>
                Some rendering of a day like {{day.getYear()}} and
                {{day.getMonth()}} etc.
            </span>
        </template>
    </v-col>
</v-row>