我们可以使用 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 https://jsfiddle.net/deniro/of7dj50m/
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>{{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 https://jsfiddle.net/deniro/nd1vph08/
来源: http://www.jianshu.com/p/bd39b243dae5