学习vue.js计算属性

关于vue.js的计算属性练习代码，供大家参考，具体内容如下

 

{{ message.split('').reverse().join('') }}



{{ message2 }}
 
反转后的内容{{ reverseMessage2() }}



原始{{message3}}
反转后{{ reverseMessage3 }}






{{fullName}}



{{ fullname }}

Js文件

var app1=new Vue({
el: '#app-1',
data: {
message: 'Hello Ke'
},
})

var app2=new Vue({
el:'#app-2',
data:{
message2:'Hello Hou Hou'
},
methods: {
reverseMessage2: function () {
return this.message2.split('').reverse().join('')
}
}
});
var app3=new Vue({
el:'#app-3',
data:{
message3:'Zhou Er Ke'
},
computed:{
//a computed getter
reverseMessage3:function () {

return this.message3.split('').reverse().join('')
}
}
});
var app4 = new Vue({
el: '#app-4',
data: {
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
},
watch: {
firstName: function (val) {
this.fullName = val + ' ' + this.lastName
},
lastName: function (val) {
this.fullName = this.firstName + ' ' + val
}
}
});
var app5=new Vue({
el:'#app-5',
data:{
firstName: 'Foo',
lastName: 'Bar',
},
computed:{
fullname:function () {
return this.firstName+' '+this.lastName
}
}
});

 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。