VueJS数据对象是2个数据对象组合

问题描述：

所以我有这个基本的VUE.js页面，但我希望变量C是变量A和B的组合。VueJS数据对象是2个数据对象组合

var app = new Vue({ 
    el: '#app', 
    data: { 
    firstname: '', 
    lastname: '', 
    fullname: firstname + lastname 
    } 
})

这样我就可以在<input type="text" v-model="fullname">使用它，它包含的名字和姓氏的值。

<label>Insert your first name:</label> 
<input type="text" v-model="firstname"> 
<label>Insert your last name:</label> 
<input type="text" v-model="lastname">

所以全名变量将是一个动态绑定姓名+姓氏变量：

名字和姓氏下面将绑定到其他2个输入。

我试了几件事，但我似乎无法得到这个工作。

你想全名称为输入？ – Bert

@Bert是和否，我希望它是具有v-model =“fullname”绑定的输入，但是我希望输入由用户在名字和姓氏输入中输入的内容动态填充。 – Kevdev

检查：[计算属性]（https://vuejs.org/v2/guide/computed.html） – Gerardo

答

使用computed properties。

var app = new Vue({ 
    el: '#app', 
    data: { 
    firstname: '', 
    lastname: '' 
    }, 
    computed: { 
    fullname: function(){ 
     return this.firstname + ' ' + this.lastname; 
    } 
    } 
});

答

您有一个属性取决于其他属性。所以使用计算。

var app = new Vue({ 
    el: '#app', 
    data: { 
    firstname: '', 
    lastname: '' 
    }, 
    computed: { 
    fullname: function() { 
     return `${this.firstname} ${this.lastname}` 
    } 
    } 
})

答

有这个确切的例子in the doc。

工作的代码片段，有一些额外的检查，所以fullname是编辑过：

var app = new Vue({ 
 
    el: '#app', 
 
    data: { 
 
     firstname: 'Foo', 
 
     lastname: 'Bar' 
 
    }, 
 
    computed: { 
 
     fullname: { 
 
     // getter 
 
     get: function() { 
 
      return this.lastname ? this.firstname + ' ' + this.lastname : this.firstname 
 
     }, 
 
     // setter 
 
     set: function (newValue) { 
 
      if (newValue.indexOf(' ') !== -1) { 
 
       var names = newValue.split(' ') 
 
       this.firstname = names[0] 
 
       this.lastname = names[1] ? names[1] : '' 
 
      } else { 
 
       this.firstname = newValue 
 
      } 
 
     } 
 
     } 
 
    } 
 
})

<div id="app"> 
 
<label>Insert your first name:</label> 
 
<input type="text" v-model="firstname"> 
 
<label>Insert your last name:</label> 
 
<input type="text" v-model="lastname"> 
 
<label>Insert your full name:</label> 
 
<input type="text" v-model="fullname"> 
 
</div> 
 
<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>

@Kevdev这正是你所要求的。 ''在你的问题中... –

VueJS数据对象是2个数据对象组合

相关推荐