vue基础之v-model与选择列表

vue基础之v-model与选择列表

选择列表就是下拉选择器，也是常见的表单控件，同样也分为单选和多选两种方式。

单选

	<div id="app15">
		<select v-model="selected">
			<option>html</option>
			<option value="css">css</option>
			<option>js</option>
		</select>
		<p>你的选择：{{selected}}</p>
	</div>
	<script type="text/javascript">
		var app15 = new Vue({
			el:'#app15',
			data:{
				selected:'css'
			}
		})
	</script>

	<option>是备选项，如果含有value属性，v-model就会优先匹配value的值；
如果没有，就会直接匹配<option>的text，比如选中第二项时，selected的值是css，而不是javascript。

二、多选

	给<select>添加属性multiple就可以多选了，此时v-model绑定的是一个数组，与复选框的用噶类似，示例代码如下：

	<div id="app15">
		<select v-model="selected" multiple="multiple">
			<option>html</option>
			<option value="css">css</option>
			<option>js</option>
		</select>
		<p>你的选择：{{selected}}</p>
	</div>
	<script type="text/javascript">
		var app15 = new Vue({
			el:'#app15',
			data:{
				// selected:['js'],
				selected:['css']
			}
		})
	</script>