計算屬性與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> ~~~