说说 Vue.js 中的 v-model 指令以及如何绑定表单元素

96
deniro
0.2 2018.12.02 16:10 字数 874

我们可以使用 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>{{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-valuefalse-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 技术
Web note ad 1