计算属性与watch监听实例 · vue

# 计算属性computed实现价格计算器 ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> 单价：<input type="text" v-model="price"><br> 数量:<input type="text" v-model="num"><br> <p>总价：{{total}}</p> </div> </body> </html> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script type="text/javascript"> var vm=new Vue({ el:'#app', data:{ price:0, num:0, }, computed:{ total:function(){ if(this.num*this.price>199){ return this.num*this.price-100; //如果总价大于199 减去100 }else{ return this.num*this.price } } } }) </script> ~~~ # watch监听实现价格计算： ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> 单价：<input v-model="price" type="text"><br> 数量:<input v-model="num" type="text"><br> <p>总价：{{ total }}</p> </div> </body> </html> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script type="text/javascript"> var vm = new Vue({ el: '#app', data: { price: 1, num: 1, total: 1, }, watch: { price: function () { if(this.price*this.num>199){ this.total=this.price*this.num-100; }else { this.total=this.price*this.num; } }, num:function (){ if(this.price*this.num>199){ this.total=this.price*this.num-100; }else { this.total=this.price*this.num; } } } }) </script> ~~~