vue-v-model

v-model语法糖

by Seetpal Singh

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.0/vue.js"></script>

<body>
  <div id="app">
    <p>{{name}} - {{age}}</p>
    <child-component v-model="name"></child-component>
    <child-component :value="age" @input="age = arguments[0]"></child-component>

    <!-- 修饰符测试（change事件触发，非input；即失去焦点触发） -->
    <input type="text" v-model.lazy="address">
    <p>{{address}}</p>
  </div>
</body>

JavaScript

const app = new Vue({
  el: '#app',
  data() {
    return {
      name: 'lg',
      age: 27,
      address: ''
    }
  },
  components: {
    'child-component': {
      props: ['value'],
      template: `
      <div>
        <input v-bind:value="value"
               @input="updateValue($event.target.value)">
        </input>
      </div>
      `,
      methods: {
        updateValue(value) {
          this.$emit('input', value);
        }
      }
    }
  }
});