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

Question

Vue 实例可以让您创建嵌套 View 模型。例如，考虑以下内容

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

如您所见，有一个嵌套的表单数据对象:form.firstName 和 form.lastName。我可以使用以下代码将此 View 模型绑定(bind)到 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>

Here's a JS Fiddle for this Vue.js example

现在，我的问题是:是否有一种简单的方法(例如指令)来创建嵌套绑定(bind)范围，允许我在没有前面的“形式”的情况下处理 firstName 和 lastName？

Knockout.js 有 with binding这允许您明确指定与 View 模型相关的绑定(bind)范围。 Here is a JS Fiddle showing Knockout.js using the with binding

是否有一个简单的模拟来模拟 Knockout 的 with binding在 Vue 中？

Answer 1

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

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