vue-model. modifier

修饰符

by li gang

HTML

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

<body>
  <div id="app">
    <!-- v-bind -->
    <my-component value="123"></my-component>
    <my-component :value="123"></my-component>
    <!-- v-model.lazy -->
    <input type="text" v-model.lazy="value2"><span>{{value2}}</span>
    <!-- v-model.number -->
    <input type="text" v-model="value3"><span>{{typeof value3}}</span>
    <input type="text" v-model.number="value4"><span>{{typeof value4}}</span>

  </div>
</body>

JavaScript

const myComponent = {
  props: ['value'],
  template: `<p>typeof value {{typeof value}}</p>`
}

const app = new Vue({
  el: '#app',
  data() {
    return {
      value2: '',
      value3: '',
      value4: ''
    }
  },
  components: {
    myComponent
  }
});

// var MyComponent = Vue.extend(myComponent)
// new MyComponent().$mount('#app')