Vue - 计算属性 [computed]

最新推荐文章于 2024-10-10 15:22:04 发布

策码奔腾---嘚驾~

最新推荐文章于 2024-10-10 15:22:04 发布

阅读量204

点赞数

文章标签： vue.js javascript html5

本文链接：https://blog.youkuaiyun.com/qq_42489210/article/details/119990053

版权

本文探讨了如何在Vue应用中使用 computed 和 methods 来处理数据过滤，通过实例展示了如何用 computed 函数处理计算属性，以及当计算属性不合适时如何切换到 methods。适合理解Vue计算属性和方法区别的开发者。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 这里主要讲的是 v-for in computed

<li v-for="n in evenNumbers">{{ n }}</li>

data: {
  numbers: [ 1, 2, 3, 4, 5 ]
},
computed: {
  evenNumbers: function () {
    return this.numbers.filter(function (number) {
      return number % 2 === 0
    })
  }
}

2. 如果计算属性不合适，可以使用 methods 方法

<ul v-for="set in sets">
  <li v-for="n in even(set)">{{ n }}</li>
</ul>

data: {
  sets: [[ 1, 2, 3, 4, 5 ], [6, 7, 8, 9, 10]]
},
methods: {
  even: function (numbers) {
    return numbers.filter(function (number) {
      return number % 2 === 0
    })
  }
}