Vue学习3：计算属性computed与监听器
Posted why_not_try
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue学习3：计算属性computed与监听器相关的知识，希望对你有一定的参考价值。
下面是计算属性相关代码：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>vue3</title> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <!--<link rel="stylesheet" type="text/css" href="main.css"/>--> 8 <script src="vue.js"></script> 9 </head> 10 <body> 11 <!--计算属性computed,可以用在一些复杂逻辑上--> 12 <div id="app"> 13 <!--1.模板中逻辑过重，不易维护--> 14 <p>{{msg.split(\'\').reverse().join(\'\')}}</p><br> 15 <!--2.用上computed属性，适用于复杂逻辑--> 16 <p>原值:{{msg}}</p> 17 <p>使用computed:字符串反转后的值:{{reverseMsg}}</p><br> 18 <!--3.用methods--> 19 <p>原值:{{msg}}</p> 20 <p>使用methods:字符串反转后的值:{{reverseMsg1()}}</p><br> 21 <!--我们可以发现computed属性和methods得到的结果是一样的。但是computed是基于它的缓存依赖（例子中指vm.msg)， 22 只有相关依赖改变才会重新取值；但是methods，每次重新渲染时，都会重新取值--> 23 <!--所以说一般computed性能更好--> 24 25 26 <!--计算属性默认只有getter,不过我们可以设置setter--> 27 <p>{{fullName}}</p> 28 <p>{{firstName}}</p> 29 <p>{{lastName}}</p> 30 </div> 31 32 <script> 33 var vm=new Vue({ 34 el: \'#app\', 35 //选项对象 36 data:{ 37 msg:\'hello\', 38 firstName:\'Smith\', 39 lastName: \'Lee\' 40 }, 41 //声明计算属性,提供的函数将用作vm.reverseMsg的getter 42 //vm.reverseMsg依赖于vm.msg；vm.msg改变时，vm.reverseMsg也会改变 43 computed:{ 44 //计算属性的getter 45 reverseMsg:function(){ 46 return this.msg.split(\'\').reverse().join(\'\'); 47 }, 48 fullName:{ 49 get:function(){ 50 return this.firstName+\' \'+this.lastName; 51 }, 52 set:function(newValue){ 53 var value=newValue.split(\' \'); 54 this.firstName=value[0]; 55 this.lastName=value[1]; 56 } 57 } 58 59 }, 60 methods:{ 61 reverseMsg1:function(){ 62 return this.msg.split(\'\').reverse().join(\'\'); 63 } 64 } 65 }); 66 vm.fullName=\'John Lee\'; 67 </script> 68 </body> 69 </html>
2.下面是监听器相关代码：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>vue4 监听属性</title> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <!--<link rel="stylesheet" type="text/css" href="main.css"/>--> 8 <script src="vue.js"></script> 9 </head> 10 <body> 11 <div id="app"> 12 <input type="text" v-model="meter"> 13 <input type="text" v-model="kilometer"> 14 <p class="test"></p> 15 </div> 16 <!--其实计算属性在大多数时候更合适，但是当数据执行异步操作或开销较大的操作时，需要采用监听器操作--> 17 <script> 18 var vm=new Vue({ 19 el: \'#app\', 20 data:{ 21 meter:\'\', 22 kilometer: \'\' 23 }, 24 watch:{ 25 //watch创建了meter和kilometer两个方法 26 meter:function(val){ 27 this.meter=val; 28 this.kilometer=val/1000; 29 }, 30 kilometer:function(val){ 31 this.kilometer=val; 32 this.meter=val*1000; 33 } 34 }, 35 36 37 }); 38 vm.$watch(\'meter\',function(newValue,oldValue){ 39 document.getElementsByClassName(\'test\')[0].innerHTML="meter新值："+newValue+ ";" + "meter旧值："+oldValue; 40 }) 41 </script> 42 </body> 43 </html>
在第一个输入框中输入123后，运行结果：
参考：https://cn.vuejs.org/v2/guide/，http://www.runoob.com/vue2
以上是关于Vue学习3：计算属性computed与监听器的主要内容，如果未能解决你的问题，请参考以下文章