Question

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

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

所以我可以在<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

使用computed properties。

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

Answer 2

您有一个依赖于其他属性的属性。所以使用computed。

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

Answer 3

有一个确切的例子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/vue@2.4.2/dist/vue.min.js"></script>

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

3 个答案: