Vue表单

表单

text,password,textarea----->v-model---》value radio,checkbox,select----->v-model checked/v-bind:value

表单修饰符：

.lazy:失去焦点（change事件同步）或者回车的时候才会同步数据 .number:变成数值 .trim:去掉前后空格，不会去掉中间空https://www.cnblogs.com/xiaobaiv/p/9153020.html

针对一般元素，比如 div、span、p、img 等，采用的是单向绑定：v-bind，只需要把数据绑定到视图中就可以，但是对于表单这种交互性比较强的元素或组件，我们一般可能需求双向绑定，即：用户对视图元素的操作同时更新数据

v-model 在内部为不同的输入元素使用不同的属性和事件来处理数据

text 和 textareacheckbox 和 radioselect

text 和 textarea

text 和 textarea 元素使用 value 属性和 input 事件

<div id="app"> <input type="text" v-model="v1" /> <textarea v-model="v2" cols="30" rows="10"></textarea> </div> let app = new Vue({ el: '#app', data: { v1: 'aaa', v2: 'bbb' } });

checkbox 和 radio

checkbox 和 radio 使用 checked 属性和 change 事件

单选框绑定一个值

<div id="app"> <input type="radio" v-model="v3" value="男" /> 男 <input type="radio" v-model="v3" value="女" /> 女 </div> let app = new Vue({ el: '#app', data: { v3: '女', } });

多选框绑定到一个布尔值或数组

<div id="app"> <input type="checkbox" v-model="v4" /> 同意 <hr/> <input type="checkbox" v-model="v5" value="足球" /> 足球 <input type="checkbox" v-model="v5" value="音乐" /> 音乐 </div> let app = new Vue({ el: '#app', data: { v4: true, v5: ['足球', '音乐'] } });

select

select 字段将 value 作为 prop 并将 change 作为事件

单选绑定到值，多选绑定到数组

<div id="app"> <select v-model="v3"> <option value="男">男</option> <option value="女">女</option> </select> <select v-model="v5" multiple> <option value="足球">足球</option> <option value="音乐">音乐</option> </select> </div>