computed:
1.基本使用
在computed中定义一个函数（看起来是一个函数，其实是一个属性），命名按照属性规范命名(一般为名词)。
1.1 应用场景：
当数据A的逻辑很复杂时，把A这个数据写在计算属性里面
1.2 代码位置：
通过选项computed：{计算属性a:值}
1.3值
带有返回值return的函数
计算属性a和data中的数据用法一样。计算属性在computed中进行定义，无需再在data中定义，在template中直接可进行使用，使用方式与data中定义的数据一样。
<body><div id='app'>{{msg}}<hr>{{str}}</div><script src='./vue.js'></script><script>var vm =newVue({
el:'#app',
data:{
msg:'abc'},
computed:{str:function(){returnthis.msg
}},
methods:{}})</script></body>
2、复杂操作-结合data中数据：
当计算属性b依赖了data中的数据a时，当a变化时，b会自动变化。这也是在开发中通常用到的情况。比如在购物的时候，下某一订单时，每选择一件商品（对应data中的数据a），合计费用（对应计算属性b）就会跟着变化。
下方的例子即模拟上方的效果：
<body><div id='app'><h2>总价格：{{totalPrice}}</h2></div><script src='./vue.js'></script><script>var vm =newVue({
el:'#app',
data:{
books:[{ id:1000, name:'Linux编程之美', price:50},{ id:1001, name:'Java疯狂讲义', price:60},{ id:1002, name:'深入理解计算机原理', price:80},{ id:1003, name:'操作系统', price:30},{ id:1004, name:'数据结构导论', price:60},]},
computed:{totalPrice(){let result=0;for(let i=0;i<this.books.length;i++){
result +=this.books[i].price;}return result
}},
methods:{}})</script></body>
3、计算属性写法演变：
3.1计算属性的setter和getter
computed：{//computed里面是大括号，本身就是对象。}
① 完整的计算属性写法：属性+方法
computed:{//定义属性
totalPrice:{//totalPrice 属性对应的是对象,不是字符串。对象就会有方法。//该属性对应的set方法和get方法//计算属性一般是没有set方法的，是只读属性//【此处set测试失败 没有出现预期效果】set:function(newValue){console.log('get方法调用啦', newValue);},get:function(){console.log('计算属性完整写法：计算啦');let result =0;for(let i =0; i <this.books.length; i++){
result +=this.books[i].price;}return result
}}}
② 计算属性一般只有get方法，是只读属性。所以一般写法为：
computed:{totalPrice:function(){//后面对应的即为get方法。totalPrice就是一个属性，调用时采用属性调用的方式，区别于方法调用（）console.log('计算属性一般写法：计算啦');let result =0;for(let i =0; i <this.books.length; i++){
result +=this.books[i].price;}return result
}},
③ 语法糖—简化写法：
computed:{totalPrice(){console.log('计算属性语法糖写法：计算啦');let result =0;for(let i =0; i <this.books.length; i++){
result +=this.books[i].price;}return result
}},
本文转载自: https://blog.csdn.net/m0_49515138/article/details/129161995
版权归原作者 前端不加班 所有， 如有侵权，请联系我们删除。
版权归原作者 前端不加班 所有， 如有侵权，请联系我们删除。