九、表单输入绑定

表单输入绑定

用v-model指令在表单<input>、<textarea>及<select>元素上创建双向数据绑定。

v-model会忽略所有表单元素的value、checked、selected的初始值而是总将vue实例的数据作为数据来源，应该在组件的data选项中声明初始值。

v-model在内部不同的输入元素使用不同属性并抛出不同事件。

• text 和 textarea 元素使用 value 属性和 input 事件；
• checkbox 和 radio 使用 checked 属性和 change 事件；
• select 字段将 value 作为 prop 并将 change 作为事件。

修饰符

• （1）.lazy :默认情况下v-model每次input事件触发后将输入框的值与数据进行同步，添加lazy修饰符，转为在change时间之后进行同步

<div id='app'>
        <input v-model.lazy="msg">
        <p>{{msg}}</p>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                msg: "hello"
            }
	    })
    </script>

• 加了.lazy修饰符后只有回车确认input内容改变后，msg的值才会改变
• （2）.number : 将用户输入的值转为数值类型
• （3）trim : 自动过滤用户输入的首位空白字符。

（2.）v-model语法糖

• 主要用于：input,select,textarea,component
• <input type="text" :value="msg"> // 此时输入值可改变msg的值，msg与input值双向绑定。
• 以上语法糖原本是这样的

  <input
  	v-bind:value="msg"
  	v-on:input="msg = $event.target.value" >
  

• 每当input中的值改变，便会触发绑定的事件，把最新的值传递给msg，从而实现v-model。

（3.）组件中的v-model

• 利用v-model让父组件的值与子组件input框里的值双向绑定。
  例：