1、计算属性与侦听器
| 区别 | |
计算属性computed |
多个值改变，为了得到一个结果，使用计算属性（为了得到一个值） |
侦听器watch |
一个值的改变，影响多个值，使用侦听器（为了观察一个值） |
| 总结 | 在实际开发过程中，大部分问题都是可以用computed计算属性来解决，但检测路由侦听器watch来完成的 |
2、计算属性computed
<template> <div id="app"> <!-- <h1>计算属性与侦听器</h1> --> <!-- 1、名字 --> <div class="case1"> <h1>案例一：名字</h1> <p>{{ firstName + lastName }}</p> <p>{{ name }}</p> </div> <!-- 2、购物车 --> <div class="case2"> <h1>案例二：购物车</h1> <table border="1px"> <thead> <th>名称</th> <th>单价</th> <th>数量</th> <th>折扣</th> <th>总价</th> <th colspan="2">操作</th> </thead> <tbody> <tr> <td>{{ shopName }}</td> <td>{{ price }}</td> <td>{{ quality }}</td> <td>{{ discount }}</td> <td>{{ totalPrice }}</td> <td><button @click="sub">-</button></td> <td><button @click="add">+</button></td> </tr> </tbody> </table> </div> </div> </template> <script> export default { data() { return { // 1、名字 firstName: "Jas", lastName: "mine", // 2、购物 shopName: "键盘", price: 100, quality: 1, discount: 0.5, }; }, // 1、计算属性(computed)：多个值改变，为了得到一个结果，使用计算属性（为了得到一个值） computed: { name() { return this.firstName + this.lastName; }, totalPrice() { return this.price * this.quality * this.discount; }, }, methods: { sub() { if (this.quality > 0) { return this.quality--; } }, add() { return this.quality++; }, }, }; </script> <style scoped> #app { display: flex; justify-content: space-around; } </style>
3、侦听器watch
<template> <div id="app"> <!-- <h1>计算属性与侦听器</h1> --> <!-- 1、名字 --> <div class="case1"> <h1>案例一：名字</h1> <p>{{ firstName + lastName }}</p> <p>{{ name }}</p> </div> <!-- 2、购物车 --> <div class="case2"> <h1>案例二：购物车</h1> <table border="1px"> <thead> <th>名称</th> <th>单价</th> <th>数量</th> <th>折扣</th> <th>总价</th> <th colspan="2">操作</th> </thead> <tbody> <tr> <td>{{ shopName }}</td> <td>{{ price }}</td> <td>{{ quality }}</td> <td>{{ discount }}</td> <td>{{ totalPrice }}</td> <td><button @click="sub">-</button></td> <td><button @click="add">+</button></td> </tr> </tbody> </table> </div> </div> </template> <script> export default { data() { return { // 1、名字 firstName: "Jas", lastName: "mine", // 2、购物 shopName: "键盘", price: 100, quality: 1, discount: 0.5, totalPrice: 0, }; }, // 1、计算属性(computed)：多个值改变，为了得到一个结果，使用计算属性（为了得到一个值） computed: { name() { return this.firstName + this.lastName; }, // totalPrice() { // return this.price * this.quality * this.discount; // }, }, // 2、侦听器(watched)：一个值的改变，影响多个值，使用侦听器（为了观察一个值） watch: { quality(value) { this.totalPrice = this.price * value * this.discount; }, }, methods: { sub() { if (this.quality > 0) { return this.quality--; } }, add() { return this.quality++; }, }, }; </script> <style scoped> #app { display: flex; justify-content: space-around; } </style>
