文档初探(七): 表单输入绑定

通常使用v-model进行绑定, 其实v-model并不是真正的双向绑定, 而是由v-on和v-bind组合起来的.

文本

new Vue({
  el: "#app",
  template: `
    <div>
      <input v-model="msg" placeholder="edit me" />
      <p>Message is {{msg}}</p>
    </div>
  `,
  data() {
    return {
      msg: ""
    };
  },
  methods: {}
});
 
        Copied!
    

实际上等价于:

new Vue({
  el: "#app",
  template: `
    <div>
      <input :value="msg" placeholder="edit me" @change="change($event)"/>
      <p>Message is {{msg}}</p>
    </div>
  `,
  data() {
    return {
      msg: ""
    };
  },
  methods: {
    change(e) {
      this.msg = e.target.value;
    }
  }
});
 
        Copied!