计算属性的基本使用
初始小示例：
代码：
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>