说说 Vue.js 中的 v-model 指令以及如何绑定表单元素
我们可以使用 Vue.js 中的 v-model 指令来完成表单数据的双向绑定。
1 基础用法
1.1 文本输入框(text)
这里演示了在文本输入框上输入的内容,会实时映射到绑定的数据上。
html:
<div id="app"> <input type="text" v-model="content" placeholder="请输入"> <p>输入框:{{content}}</p> </div>
js:
<script> var app = new Vue({ el: '#app', data: { content: '' } }); </script>
效果:
1.2 大文本输入框(textarea)
绑定方法与文本输入框相同。
html:
<div id="app2"> <textarea v-model="content" placeholder="请输入"></textarea> <p>内容:</p> <p style="white-space: pre">{{content}}</p> </div>
js:
var app2 = new Vue({ el: '#app2', data: { content: '' } });
效果:
这里对展示的内容所对应的
<p>元素加了
white-space: pre样式,这样内容即使带有回车符也会保留。
**注意:**表单控件所显示的值只依赖于所绑定的数据,所以即便设置了表单控件中的 value值,也不会起作用哦。同理,
<textarea>xxx</textarea>之间的值也无效。
之前的示例我们可以发现,使用中文输入法时,只有确定选中的词语,才会被如果 Vue.js 所更新。如果希望输入的内容实时更新,那么可以使用 @input
。
html:
<div id="app3"> <textarea @input="inputHandler" placeholder="请输入"></textarea> <p>内容:</p> <p style="white-space: pre">{{content}}</p> </div>
js:
var app3 = new Vue({ el: '#app3', data: { content: '' }, methods: { inputHandler: function (event) { this.content = event.target.value; } } });
可以看出,即使在
@input定义的函数不带参数,Vue.js 也会在定义的函数(示例中的 inputHandler)中传入 event 原生事件对象。
效果:
1.3 单选框
单选框一般都有多个条件可供选择,既然是单选框,自然希望实现互斥效果,我们可以使用 v-model 指令配合单选框的 value 来实现。
html:
<div id="app4"> <input id="radio1" type="radio" v-model="checked" value="文学"> <label for="radio1">文学</label> <input id="radio2" type="radio" v-model="checked" value="艺术"> <label for="radio2">艺术</label> <input id="radio3" type="radio" v-model="checked" value="经济"> <label for="radio3">经济</label> <br> <p>选择了:{{checked}}</p> </div>
js:
var app4 = new Vue({ el: '#app4', data: { checked: '文学' } });
效果:
1.4 复选框
复选框的绑定方式与单选框相同,只不过复选框所对应的数据类型是数组罢了。
html:
<div id="app5"> <input id="checkbox1" type="checkbox" v-model="checked" value="文学"> <label for="checkbox1">文学</label> <input id="checkbox2" type="checkbox" v-model="checked" value="艺术"> <label for="checkbox2">艺术</label> <input id="checkbox3" type="checkbox" v-model="checked" value="经济"> <label for="checkbox3">经济</label> <br> <p>选择了:{{checked}}</p> </div>
js:
var app5 = new Vue({ el: '#app5', data: { checked: ['文学','艺术'] } });
效果:
1.5 下拉选择框
1.5.1 单选
html:
<div id="app6"> <select v-model="selected"> <option value="1">文学</option> <option value="2">艺术</option> <option>经济</option> </select> <br> <p>选择了:{{selected}}</p> </div>
js:
var app6 = new Vue({ el: '#app6', data: { selected: '1' } });
效果:
可以看出,如果
<option>含有 value 值,则会先匹配该值;如果没有,则匹配
<option>中的 text 值(比如示例中的
<option>经济</option>)。
1.5.2 多选
为
<select>标签添加 multiple 属性,即可实现多选。
html:
<div id="app7"> <select v-model="selected" multiple> <option value="1">文学</option> <option value="2">艺术</option> <option>经济</option> </select> <br> <p>选择了:{{selected}}</p> </div>
在实际应用场景,
<select>标签中的
<opinion>一般是通过 v-for 指令动态输出的,其中每一项的 value 或 text 都可以使用 v-bind 动态输出的。
html:
<div id="app8"> <select v-model="selected"> <option v-for="option in options" :value="option.value">{{option.text}} </option> </select> <br> <p>选择了:{{selected}}</p> </div>
js:
var app8 = new Vue({ el: '#app8', data: { selected: '1', options: [ {text: '文学', value: '1'}, {text: '艺术', value: '2'} ] } });
效果:
因为 select 标签的呈现样式依赖于浏览器,所以在实际业务场景中,我们更多的是使用 div 来模拟 select 标签的列表功能,而这可以通过使用 Vue.js 自定义组件的方式来实现一个通用的下拉选择组件。
以上示例 DEMO
2 绑定动态变量
之前所说的示例,v-model 绑定的都是静态变量。我们可以使用 v-bind 来绑定动态变量。
2.1 单选框
html:
<div id="app"> <input id="radio1" type="radio" v-model="picked" :value="value"> <label for="radio1">文学</label> <input id="radio2" type="radio" v-model="picked" :value="value2"> <label for="radio2">艺术</label> <input id="radio3" type="radio" v-model="picked" :value="value3"> <label for="radio3">经济</label> <br> <p>{{picked}}</p> <p&g 24000 t;{{value}},{{value2}},{{value3}}</p> </div>
js:
var app = new Vue({ el: '#app', data: { picked: false, value: '文学', value2: '艺术', value3: '经济', } });
效果:
示例中定义的单选框默认值为 picked 所定义的 false。当选中某个单选框时,则动态绑定在
:value中定义的变量。
2.2 复选框
html:
<div id="app2"> <input id="checkbox" type="checkbox" v-model="checked" :true-value="value1" :false-value="value2"> <label for="checkbox">开关</label> <p>checked:{{checked}}</p> <p>value1:{{value1}}</p> <p>value2:{{value2}}</p> </div>
js:
var app2 = new Vue({ el: '#app2', data: { value1: '亮', value2: '暗', checked: '' } });
效果:
复选框的默认值绑定的是 v-model 定义的变量,而勾选与取消勾选所绑定的值,则分别由
:true-value与
false-value来实现动态绑定。
2.3 下拉选择框
html:
<div id="app3"> <select v-model="selected"> <option :value="{number:1}">文学</option> <option :value="{number:2}">艺术</option> </select> <br> <p>选择了:{{selected.number}}</p> </div>
js:
var app3 = new Vue({ el: '#app3', data: { selected: '' } });
效果:
当选中某个 option 时,app3.selected 为 Object,所以 selected.number 即为
:value定义的绑定值。
以上示例 DEMO
- Vue.js 中的 v-model 指令及绑定表单元素的方法
- Vue.js 学习(8) -- v-model: 表单控件绑定
- Vue.js基础指令实例讲解(各种数据绑定、表单渲染大总结)
- 浅谈 Vue v-model指令的实现原理 - 如何利用v-model设计自定义的表单组件
- vue教程1-01 v-model 一般表单元素(input) 双向数据绑定
- vue.js使用v-model指令实现的数据双向绑定功能示例
- vue.js 表单控件 输入绑定 v-model的使用
- 浅谈 Vue v-model指令的实现原理 - 如何利用v-model设计自定义的表单组件
- VUE实现表单元素双向绑定(总结)
- vue.js基础知识篇(3):计算属性、表单控件绑定
- Vue-resource如何实现表单提交以及file图片上传的压缩
- 学习vue.js表单控件绑定操作
- vue.js指令v-model实现方法
- Vue.js学习 Item9 – 表单控件绑定
- Vue.js实例学习:表单输入绑定
- vue v-model表单控件绑定详解
- 为什么 vue.js存在某些情况下 v-model绑定数据不实时更新呢?
- 5.2.vue入门基础学习笔记-基础指令介绍(表单绑定v-model)
- Vue.js 实现表单数据参数传递,以及不同独立按钮之间的参数传递
- Vue.js学习笔记:v-model双向绑定