vue中表单绑定及其修饰符

v-model=“value” 可以实现表单元素的双向绑定,其原理是:
1.v-bind绑定响应式数据；
2.通过oninput触发事件获取当前$event.target.value，然后赋值给当前变量。

<div id="app">
    <input type="text" v-model="value">
    
    // 当type="checkbox" v-model绑定的值是 true 或者 false
     <input type="checkbox" v-model="value">
     
    // 当type="radio" 需要在标签上加 value="text" 才会有值绑定 该值为 text
    <input type="radio" value="text" v-model="value">
    <textarea type="text" v-model="value"></textarea>
    // 当表单元素为下拉框的时候  如果option没有写value的时候,绑定的值为下拉项,否则就是option的value值
    <select v-model="value">
      <option disabled>----请选择----</option>
      <option value="1">A</option>
      <option value="2">B</option>
      <option value="3">C</option>
    </select>
    // v-model还有一些修饰符 lazy(输入框失焦时绑定值)    
    <input type="text" v-model.lazy="value">
    // number(input默认绑定的都是string类型,加number修饰后,当输入的是数字的时候 会转成number类型)
    <input type="text" v-model.number="value">
    // trim(会去掉首尾空格)
    <input type="text" v-model.trim="value">
    <span>value:{{value}}</span>
  </div>
</body>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      value: ''
    },
    watch: {
      value() {
        console.log(typeof this.value);
      }
    }
  })
</script>```