1.背景
在实际开发中,有的属性很复杂,需要计算得到.....
2.简单使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>计算属性</title> <!-- 开发环境版本，包含了有帮助的命令行警告 --> <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>--> <script src="./js/vue.js"></script> </head> <style> </style> <body> <div id="app"> <h2>---------计算属性---------------</h2> <h4>传入圆的直径计算圆的面积</h4> 不使用计算属性写法: <div>圆的面积为:{{d}}/2*3.14</div> 使用计算属性写法: <div>圆的面积为:{{s}}</div> </div> <script> const app = new Vue({ el: '#app', data: { name: 'ldp', d: 10 }, computed: { s: function () { return this.d / 2 * 3.14; } } }); </script> </body> </html>
3.计算属性统计订单总金额
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>计算属性</title> <!-- 开发环境版本，包含了有帮助的命令行警告 --> <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>--> <script src="./js/vue.js"></script> </head> <style> </style> <body> <div id="app"> <h2>---------计算属性统计订单金额---------------</h2> <h3>订单列表如下</h3> <ul> <li v-for="item in orderList"> {{item.orderName}}---- {{item.price}}---- {{item.num}} </li> </ul> <h4>合计:{{allPrice}}</h4> </div> <script> const app = new Vue({ el: '#app', data: { name: 'ldp', orderList: [ {orderName: '方便面', price: 3, num: 6}, {orderName: '鸡腿', price: 8, num: 1}, {orderName: '手机', price: 39, num: 4}, {orderName: '鱼', price: 12, num: 9} ] }, computed: { allPrice: function () { // 高阶函数 all表示每次的结果,item表示循环出来的每个对称 , reduce 函数的第二个参数表示 all=0开始累加 return this.orderList.reduce((all, item) => { return all + item.price * item.num }, 0) } } }); </script> </body> </html>
4.计算属性computed的getter与setter方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>{{title}}</title> <!-- 开发环境版本，包含了有帮助的命令行警告 --> <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>--> <script src="./js/vue.js"></script> </head> <style> </style> <body> <div id="app"> <h2>---------{{title}}---------------</h2> 每个计算属性都包含一个getter和一个setter 在上面的例子中，我们只是使用getter来读取。 在某些情况下，你也可以提供一个setter方法（不常用） <h3>订单列表如下</h3> <ul> <li v-for="item in orderList"> {{item.orderName}}---- {{item.price}}---- {{item.num}} </li> </ul> <h4>合计:{{allPrice}}</h4> </div> <script> const app = new Vue({ el: '#app', data: { name: 'ldp', title: '计算属性computed的getter与setter方法', orderList: [ {orderName: '方便面', price: 3, num: 6}, {orderName: '鸡腿', price: 8, num: 1}, {orderName: '手机', price: 39, num: 4}, {orderName: '鱼', price: 12, num: 9} ] }, computed: { allPrice: { get() { console.log("--computed-调用了get方法") return this.orderList.reduce((all, item) => { return all + item.price * item.num }, 0) }, // 当有属性值变动的时候 vue会自动调用 set方法 set(newValue) { console.log("--computed-调用了set方法---newValue=" + newValue) } } } }); </script> </body> </html>
5.计算属性computed的缓存
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>{{title}}</title> <!-- 开发环境版本，包含了有帮助的命令行警告 --> <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>--> <script src="./js/vue.js"></script> </head> <style> </style> <body> <div id="app"> <h2>---------{{title}}---------------</h2> methods和computed看起来都可以实现我们的功能， 那么为什么还要多一个计算属性这个东西呢？ 原因：计算属性会进行缓存，如果多次使用时，计算属性只会调用一次 <h3>订单列表如下</h3> <ul> <li v-for="item in orderList"> {{item.orderName}}---- {{item.price}}---- {{item.num}} </li> </ul> 计算属性只会调用一次 <h4>合计:{{allPrice}}</h4> <h4>合计:{{allPrice}}</h4> <h4>合计:{{allPrice}}</h4> 普通方法每次都会调用 <h4>方法合计:{{ getAllPrice()}}</h4> <h4>方法合计:{{ getAllPrice()}}</h4> <h4>方法合计:{{ getAllPrice()}}</h4> </div> <script> const app = new Vue({ el: '#app', data: { name: 'ldp', title: '计算属性computed的缓存', orderList: [ {orderName: '方便面', price: 3, num: 6}, {orderName: '鸡腿', price: 8, num: 1}, {orderName: '手机', price: 39, num: 4}, {orderName: '鱼', price: 12, num: 9} ] }, methods: { getAllPrice() { console.log("--methods-调用了getAllPrice方法") return this.orderList.reduce((all, item) => { return all + item.price * item.num }, 0) } }, computed: { allPrice: { get() { console.log("--computed-调用了get方法") return this.orderList.reduce((all, item) => { return all + item.price * item.num }, 0) }, // 当有属性值变动的时候 vue会自动调用 set方法 set(newValue) { console.log("--computed-调用了set方法---newValue=" + newValue) } } } }); </script> </body> </html>
完美!