学习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
}
}
});
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。