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

Question

所以我有这个基本的VUE.js页面,但我希望变量C是变量A和B的组合.

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

所以我可以在a中使用它,<input type="text" v-model="fullname">它将包含firstname和lastname的值.

firstname和lastname将绑定到其他2个输入,如下所示:

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

所以fullname变量将是一个动态绑定的firstname + lastname变量.

我已经尝试了几件事,但我似乎无法让这个工作.

Answer 1

使用计算属性.

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