計算屬性的基本使用
初始小示例：
代碼：
window.onload = () =>{ new Vue({ el:'div', data:{ msg:'' } }) } </script> </head> <body> <div> <input type="text" v-model="msg"/><br /> 原樣顯示：{{msg}}<br /> 大寫顯示：{{msg.toUpperCase()}}<br /> </div>
直接在HTML中使用toUpperCase()方法，這樣使得代碼太長，影響代碼的邏輯；因此就引入了計算屬性的應用
Vue計算屬性：
更強大的屬性聲明方式，可以對定義的屬性進行邏輯處理與數據監視;
計算屬性的使用；
https://cn.vuejs.org/v2/guide/computed.html#計算屬性
計算屬性的vue代碼：
<script> window.onload = () =>{ new Vue({ el:'div', data:{ msg:'' }, computed:{ msg1:function(){ return this.msg.toUpperCase(); } } }) } </script>
html:
<body>
<div>
<input type="text" v-model="msg"/><br />
原樣顯示：{{msg}}<br />
大寫顯示：{{msg.toUpperCase()}}<br />
計算屬性顯示：{{msg1}}<br />
</div>
</body>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>計算屬性的基本使用</title> 6 <script type="text/javascript" src="../js/vue.js" ></script> 7 <script> 8 window.onload = () =>{ 9 10 new Vue({ 11 el:'div', 12 data:{ 13 msg:'' 14 }, 15 computed:{ 16 msg1:function(){ 17 18 return this.msg.toUpperCase(); 19 } 20 } 21 22 23 24 }) 25 } 26 27 28 </script> 29 </head> 30 <body> 31 <div> 32 <input type="text" v-model="msg"/><br /> 33 原樣顯示：{{msg}}<br /> 34 大寫顯示：{{msg.toUpperCase()}}<br /> 35 計算屬性顯示：{{msg1}}<br /> 36 37 38 </div> 39 </body> 40 </html>
計算屬性的getter和setter
computed:{ num1:function(){ return this.num+10; } }
因此需要將num1轉化為數據類型：
<script> window.onload = () =>{ new Vue({ el:'div', data:{ num:0 }, computed:{ num1:function(){ return parseInt(this.num) +10; } } }) } </script> </head> <body> <div> <input type="text" v-model="num"/><br /> 原樣顯示：{{num}}<br /> 計算屬性顯示：{{num1}}<br /> </div> </body>
直接修改num1:
直接修改報錯的代碼：
<script> window.onload = () =>{ new Vue({ el:'div', data:{ num:0 }, computed:{ num1:function(){ return parseInt(this.num) +10; } } }) } </script> </head> <body> <div> <input type="text" v-model="num"/><br /> 原樣顯示：{{num}}<br /> <input type="text" v-model="num1"/><br /> 計算屬性顯示：{{num1}}<br /> </div> </body>
因此我們可以認為計算屬性時默認是隱式的getter方法
定義get與set方法：
computed:{ num1:{ get:function(){ return parseInt(this.num) +10; }, set:function(value){ return this.num=value; } } }
注意：在寫顯式的set方法時需要給它依賴的屬性賦值
HTML：
<div>
<input type="text" v-model="num"/><br />
原樣顯示：{{num}}<br />
<input type="text" v-model="num1"/><br />
計算屬性顯示：{{num1}}<br />
</div>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>計算屬性的getter和setter</title> 6 <script type="text/javascript" src="../js/vue.js" ></script> 7 <script> 8 window.onload = () =>{ 9 10 new Vue({ 11 el:'div', 12 data:{ 13 num:0 14 }, 15 computed:{ 16 // num1:function(){ 17 // 18 // return parseInt(this.num) +10; 19 // } 20 21 22 23 num1:{ 24 get:function(){ 25 return parseInt(this.num) +10; 26 }, 27 set:function(value){ 28 return this.num=value; 29 30 31 } 32 33 34 35 } 36 } 37 38 39 40 }) 41 } 42 43 44 </script> 45 </head> 46 <body> 47 <div> 48 <input type="text" v-model="num"/><br /> 49 原樣顯示：{{num}}<br /> 50 <input type="text" v-model="num1"/><br /> 51 計算屬性顯示：{{num1}}<br /> 52 53 54 </div> 55 </body> 56 </html>
計算屬性與方法的區別
計算屬性有緩存機制，方法沒有；
只要計算屬性內相關依賴的值不發生改變，多次調用計算屬性可以從緩存中獲取值，不必重復計算；
方法每次調用都要重新執行一遍；
依賴值發生改變時都會發生調用；
示例：
屬性與方法都可以將小寫變為大寫
其vue代碼為：
<script> window.onload = () =>{ new Vue({ el:'div', data:{ msg:'' }, computed:{ msg1:function(){ console.log("$$$$computed"); return this.msg.toUpperCase(); } }, methods:{ upperCase(){ console.log('####methods'); return this.msg.toUpperCase(); }, show(){ console.log("計算屬性"+this.msg); console.log("方法的調用"+this.upperCase()); } } }) } </script>
html:
<body>
<div>
<input type="text" v-model="msg"/><br />
原樣顯示：{{msg}}<br />
計算屬性顯示：{{msg1}}<br />
方法顯示：{{upperCase()}}<br />
<button @click="show">show</button>
</div>
</body>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>計算屬性與方法的區別</title> 6 <script type="text/javascript" src="../js/vue.js" ></script> 7 <script> 8 window.onload = () =>{ 9 10 new Vue({ 11 el:'div', 12 data:{ 13 msg:'' 14 }, 15 computed:{ 16 msg1:function(){ 17 console.log("$$$$computed"); 18 19 return this.msg.toUpperCase(); 20 } 21 }, 22 methods:{ 23 24 upperCase(){ 25 console.log('####methods'); 26 return this.msg.toUpperCase(); 27 28 }, 29 show(){ 30 console.log("計算屬性"+this.msg); 31 console.log("方法的調用"+this.upperCase()); 32 } 33 34 } 35 36 37 38 39 }) 40 } 41 42 43 </script> 44 </head> 45 <body> 46 <div> 47 <input type="text" v-model="msg"/><br /> 48 原樣顯示：{{msg}}<br /> 49 50 計算屬性顯示：{{msg1}}<br /> 51 方法顯示：{{upperCase()}}<br /> 52 <button @click="show">show</button> 53 54 55 </div> 56 </body> 57 </html>