假设我们有以下数据:
data() {
return {
list: [1, 2, 3, 4, 5],
}
}
我们希望在模板中显示这个列表的长度,可以在computed属性中定义一个计算属性listLength,如下所示:
computed: {
listLength() {
return this.list.length
}
}
然后我们就可以在模板中直接使用这个计算属性了,而不需要像methods那样调用函数:
<template>
<div>
列表长度:{{ listLength }}
</div>
</template>
在这个例子中,computed属性listLength会根据依赖属性list的长度进行计算,并自动更新其值。我们直接在模板中使用listLength,模板会自动根据计算属性的值进行渲染,这样就可以非常方便地计算和显示列表的长度,避免了在methods中写重复的代码。