学习vue.js计算属性
关于vue.js的计算属性练习代码,供大家参考,具体内容如下
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <title>vuejs计算属性</title> </head> <body> <!--字母反转方式一:不推荐 --> <divid="app-1"> {{message.split('').reverse().join('')}} </div> <!--字母反转方式二 --> <divid="app-2"> {{message2}} <!--注意{}内的内容如果是方法要加() --> <p>反转后的内容{{reverseMessage2()}}</p> </div> <!--字母反转方式三此方法在括号中没有方法()--> <divid="app-3"> <p>原始{{message3}}</p> <p>反转后{{reverseMessage3}}</p> </div> <!--方法二和方法三的区别在于methods会实时刷新数据而computed会在第一次加载后会产生缓存--> <!--Vue.js提供了一个方法$watch,它用于观察Vue实例上的数据变动。当一些数据需要根据其它数据变化时,$watch很诱人——特别是如果你来自AngularJS。不过,通常更好的办法是使用计算属性而不是一个命令式的$watch回调。--> <divid="app-4"> {{fullName}} </div> <!--另一种实现方式--> <divid="app-5"> {{fullname}} </div> <!--计算属性可以满足需求而且书写简便为什么需要watch? 来响应数据的变化。当你想要在数据变化响应时,执行异步操作或昂贵操作时,这是很有用的。--> <scriptsrc="js/vue.js"></script> <scriptsrc="js/vuetext.js"></script> </body> </html>
Js文件
varapp1=newVue({ el:'#app-1', data:{ message:'HelloKe' }, }) varapp2=newVue({ el:'#app-2', data:{ message2:'HelloHouHou' }, methods:{ reverseMessage2:function(){ returnthis.message2.split('').reverse().join('') } } }); varapp3=newVue({ el:'#app-3', data:{ message3:'ZhouErKe' }, computed:{ //acomputedgetter reverseMessage3:function(){ returnthis.message3.split('').reverse().join('') } } }); varapp4=newVue({ el:'#app-4', data:{ firstName:'Foo', lastName:'Bar', fullName:'FooBar' }, watch:{ firstName:function(val){ this.fullName=val+''+this.lastName }, lastName:function(val){ this.fullName=this.firstName+''+val } } }); varapp5=newVue({ el:'#app-5', data:{ firstName:'Foo', lastName:'Bar', }, computed:{ fullname:function(){ returnthis.firstName+''+this.lastName } } });
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。