9.Vue表单

一.复选框&＃xff0c;checkbox

1.v-model 会根据控件类型自动选取正确的方法来更新元素
实例中演示了 input 和 textarea 元素中使用 v-model 实现双向数据绑定

<div id&＃61;"app"><p>input 元素&＃xff1a;p><input v-model&＃61;"message" placeholder&＃61;"编辑我……"> //开始运行显示input初始数据&＃xff0c;当在输入框里输入其他数据时&＃xff0c;下一行p标签里的message也是实时变化&＃xff0c;这就是双向绑定<p>消息是: {{ message }}p><p>textarea 元素&＃xff1a;p><p style&＃61;"white-space: pre">{{ message2 }}p><textarea v-model&＃61;"message2" placeholder&＃61;"多行文本输入……">textarea> 开始运行显示textarea初始数据&＃xff0c;当在输入框里输入其他数据时&＃xff0c;上一行p标签里的message2也是实时变化&＃xff0c;这就是双向绑定
div><script>
new Vue({el: &＃39;#app&＃39;,data: {message: &＃39;imput初始数据&＃39;,message2: &＃39;textarea初始数据&＃39;}
})
script>


2.复选框如果是一个为逻辑值&＃xff0c;如果是多个则绑定到同一个数组

<div id&＃61;"app"><p>单个复选框&＃xff1a;p><input type&＃61;"checkbox" id&＃61;"checkbox" v-model&＃61;"checked"> <label for&＃61;"checkbox">{{ checked }}label> //单个复选框&＃xff0c;选中时checke会变成true<p>多个复选框&＃xff1a;p><input type&＃61;"checkbox" id&＃61;"runoob" value&＃61;"Runoob" v-model&＃61;"checkedNames"><label for&＃61;"runoob">Runooblabel><input type&＃61;"checkbox" id&＃61;"google" value&＃61;"Google" v-model&＃61;"checkedNames"><label for&＃61;"google">Googlelabel><input type&＃61;"checkbox" id&＃61;"taobao" value&＃61;"Taobao" v-model&＃61;"checkedNames"><label for&＃61;"taobao">taobaolabel><br><span>选择的值为: {{ checkedNames }}span> //多个复选框&＃xff0c;标签中的显示Runoob&＃xff0c;Goole这些会添加到列表checkedNames中
div><script>
new Vue({el: &＃39;#app&＃39;,data: {checked : false,checkedNames: []}
})
script>


二.单选按钮&＃xff0c;radio

单选按钮

<div id&＃61;"app"><input type&＃61;"radio" id&＃61;"runoob" value&＃61;"Runoob" v-model&＃61;"picked"><label for&＃61;"runoob">Runooblabel><br><input type&＃61;"radio" id&＃61;"google" value&＃61;"Google" v-model&＃61;"picked"><label for&＃61;"google">Googlelabel><br><span>选中值为: {{ picked }}span> //选中后会直接显示选中的按钮
div><script>
new Vue({el: &＃39;#app&＃39;,data: {picked : &＃39;Runoob&＃39;}
})
script>


三.select 下拉列表

<div id&＃61;"app"><select v-model&＃61;"selected" name&＃61;"fruit"><option value&＃61;"">选择一个网站option><option value&＃61;"www.runoob.com">Runooboption><option value&＃61;"www.google.com">Googleoption>select> //select列表&＃xff0c;里面有三个选项&＃xff0c;选中后&＃xff0c;selected会变成对应的值<div id&＃61;"output">选择的网站是: {{selected}}div>
div><script>
new Vue({el: &＃39;#app&＃39;,data: {selected: &＃39;&＃39; }
})
script>


四.v_model一些其他的配置

1.lazy
在默认情况下&＃xff0c; v-model 在 input 事件中同步输入框的值与数据&＃xff0c;但你可以添加一个修饰符 lazy &＃xff0c;从而转变为在 change 事件中同步&＃xff1a;

2.number
如果想自动将用户的输入值转为 Number 类型&＃xff08;如果原值的转换结果为 NaN 则返回原值&＃xff09;&＃xff0c;可以添加一个修饰符 number 给 v-model 来处理输入值&＃xff1a;

3.trim
如果要自动过滤用户输入的首尾空格&＃xff0c;可以添加 trim 修饰符到 v-model 上过滤输入&＃xff1a;