如何在 vue.js 中创建嵌套绑定范围？

Question

Vue 实例可以允许您创建嵌套视图模型。例如，考虑以下情况

new Vue({
  el: '#app',
  data: {
    form: {
      firstName: "Joe",
      lastName: "Bloggs"
    }
  },
  computed: {
    name: function () {
        return this.form.firstName + ' ' + this.form.lastName;
    }
  }
});

正如您所看到的，有一个嵌套的表单数据对象：form.firstName 和form.lastName。我可以使用以下命令将此视图模型绑定到 HTML：

<div id="app">
  <form>
    <label>
      First:
      <input type="text" v-model="form.firstName">
    </label>
    <label>
      Last:
      <input type="text" v-model="form.lastName">
    </label>
  </form>
  <div>
    You are: {{name}}
  </div>
</div>

这是此 Vue.js 示例的 JS Fiddle

现在，我的问题是：是否有一种简单的方法（例如指令）来创建嵌套绑定范围，使我可以在没有前面的“表单”的情况下寻址firstName和lastName？

Knockout.js 具有with 绑定，允许您显式指定与视图模型相关的绑定范围。这是一个 JS Fiddle，显示 Knockout.js 使用 with 绑定

Vue 中是否有一个类似于 Knockout 的简单绑定绑定？

Answer 1

只要您没有重复的值，您就可以将其别名为计算属性，例如

computed: {
  firstName: function() {
    return form.firstName
  },
  lastName: function() {
    return form.lastName
  }
}