学习vue.js计算属性

发布时间：2020-12-17 03:07:43 所属栏目：百科来源：网络整理

导读：关于vue.js的计算属性练习代码，供大家参考，具体内容如下 vuejs计算属性反转后的内容{{ reverseMessage2() }} 原始{{message3}} 反转后{{ reverseMessage3 }} div id="app-4" {{fullName}} script src="js/vue.js" script src="js/vuetext.js" Js文件 var

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

vuejs计算属性

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

原始{{message3}}

反转后{{ reverseMessage3 }}

<div id="app-4">
{{fullName}}

Js文件

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',},computed:{
fullname:function () {
return this.firstName+' '+this.lastName
}
}
});

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!