目录一、计算属性使用场景定义格式普通写法使用格式示例 —— 数组求和computed有缓存二、总结一、计算属性 使用场景 从已有的数据A中计算等到的新的数据B
从已有的数据A中计算等到的新的数据B，使用计算属性。
如果一个结果需要依赖data中的数据，但是需要经过一些逻辑处理，才能得到你想要的数据。此时就可以使用计算属性。
在Vue实例中，补充computed配置项
{
data(){},
methods: {}
// 声明计算属性
computed: {
//属性名字（计算属性名称）
//属性的值（计算属性处理函数）
计算属性名1 () {
// 对依赖的数据进行处理，且进行return
return
}，
计算属性名2 () {
// 对依赖的数据进行处理，且进行return
return
}
}
}computed是vue的配置选项，它的值是一个对象，其中可定义多个计算属性，每个计算属性就是一个函数。
在两个地方使用：
<template>
<div id="app">
<p>求和:{{ sum1 }}</p>
</div>
</template>
<script>
export default {
data () {
return {
arr: [1,2,3,4]
}
},
computed: {
sum1(){
// 对依赖的数据进行处理，且进行return
return this.arr.reduce((sum, item)=>sum + item, 0)
}
}
}
</script>在模板中使用计算属性，和使用data的方式是一样的。
虽然在计算属性中声明的是函数，但是在模板是使用，当做的数据来使用。不需要加括号。
小结：
示例：
<template>
<div id="app">
<p>求和:{{ sum1 }}</p>
<p>求和:{{ sum1 }}</p>
<p>求和:{{ sum1 }}</p>
</div>
</template>
<script>
export default {
data () {
return {
arr: [1,2,3,4]
}
},
computed: {
sum1(){
// 求arr的和，并返回
// 如果arr变化了，计算属性会重新计算
console.log('计算属性被调用了')
return this.arr.reduce((sum, item)=>sum + item, 0)
}
}
}
</script>结果：
当我们在模板中来显示一份经过对数据项进行复杂计算之后的结果时，我们有两种解决方案：
如何选择：
到此这篇关于vue计算属性及函数的选择的文章就介绍到这了,更多相关vue计算属性内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
--结束END--
本文标题: vue计算属性及函数的选择
本文链接: https://www.lsjlt.com/news/148235.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0