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>

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

现在，我的问题是：是否有一种简单的方法（例如指令）来创建嵌套的绑定范围，允许我在不使用前面的＆＃34;形式的情况下解析firstName和lastName。＆＃34;？

Knockout.js具有with binding，允许您显式指定与视图模型相关的绑定范围。 Here is a JS Fiddle showing Knockout.js using the with binding

在Vue中有没有简单的类似于Knockout的with binding？

Answer 1

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

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

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

1 个答案: