前端框架vue.js系列（5）：表单元素的双向绑定

你的名字 2021-09-14 06:22 156阅读 0赞

vue中常用到的表单组件主要有文本输入框，单选框，多选框和下拉列框。本篇将会讲述如何使用这些原生组件及这些组件在vue框架中的一些特性。vue与这些组件的绑定方法是：v-model，这种绑定是双向绑定。

# 文本输入框 #

文本输入框是type='text'的input元素，绑定方法如下：

<input type="text" v-model="message">
    <label>Message is: {
       { message }}</label>
    
    <script>
    	var vue = new Vue({
    		el: "#app",
    		data: {
    			message: ""
    		}
    	});
    </script>

# 单选框 #

单选框是type='radio'的input元素，绑定的选中项值与元素的value属性值匹配，返回的是一个字符串。

<input type="radio" id="oneid" value="One" v-model="picked" v-bind:value="'NewValue'">
    <label for="oneid">One</label>
    <input type="radio" id="twoid" value="Two" v-model="picked">
    <label for="twoid">Two</label>
    
    <script>
    	var vue = new Vue({
    		el: "#app",
    		data: {
    			picked: "Two"
    		}
    	});
    </script>

当元素中同时存在value属性和v-bind:value时，绑定的值以v-bind:value优先，即上例中当选择One选项时，picked的值为NewValue，这种设置方法的好处在于实现选项的文本内容与绑定的数据值不一样。

# **多选项** #

单选框是type='checkbox'的input元素，绑定的选中项值与元素的value属性值匹配，当只有一个复选框时，返回的是真假；当有多个复选框时，返回是一个数组。

<input type="checkbox" id="checkbox" v-model="checked">
    <label>{
       { checked }}</label>
    <br />
    
    <input type="checkbox" id="jackid" value="Jack" v-model="checkedNames">
    <label for="jackid">Jack</label>
    <input type="checkbox" id="johnid" value="John" v-model="checkedNames">
    <label for="johnid">John</label>
    <input type="checkbox" id="mikeid" value="Mike" v-model="checkedNames">
    <label for="mikeid">Mike</label>
    <br />
    <span>Checked names: {
       { checkedNames }}</span>
    
    <script>
    	var vue = new Vue({
    		el: "#app",
    		data: {
    			checked: false,
    			checkedNames: ["Jack"]
    		}
    	});
    </script>

# **下拉列** #

下拉列使用select元素，与元素<option>的innerHtml值匹配,即select的value值。

<select v-model="selected">
    	<option disabled value="">请选择</option>
    	<option>A</option>
    	<option>B</option>
    	<option>C</option>
    </select>
    <span>Selected: {
       { selected }}</span>
    
    <select v-model="selected1">
    	<option disabled value="">请选择</option>
    	<option v-for="option in options" v-bind:value="option.text">
    		{
       { option.value }}
    	</option>
    </select>
    <span>Selected: {
       { selected1 }}</span>
    
    <script>
    	var vue = new Vue({
    		el: "#app",
    		data: {
    			selected: "A",
    			selected1: "One",
    			options: [{
    					text: 'One',
    					value: 'A'
    				},
    				{
    					text: 'Two',
    					value: 'B'
    				},
    				{
    					text: 'Three',
    					value: 'C'
    				}
    			]
    		}
    	});
    </script>