Vue从入门到实战：选择框

来自CloudWiki
跳转至： 导航， 搜索

与复选框类似，选择框可以是单选，可以是多选，

单选时，绑定的是选项的值

多选时，绑定到一个数组，所有选中的选项的值被保存到数组中。 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id = "app">
			<h3>单选选择框</h3>
			<select v-model="education">
				<option disabled value="">请选择您的学历</option>
				<option>高中</option>
				<option>本科</option>
				<option>硕士</option>
				<option>博士</option>
			</select>
			<p>您的学历是：{{ education }}</p>
			<h3>多选选择框</h3>
			<select v-model="searches" multiple>
				<option v-for="option in options" v-bind:value="option.value">
					{{ option.text }}
				</option>
			</select>
			<p>您选择的搜索引擎是：{{ searches }}</p>
		</div>
	
		<script src="vue.js"></script>
		<script>
			var vm = new Vue({
		    el: '#app',
		    data: {
		     	education: '',
		     	searches: [],
		     	options: [
		     		{text: '百度', value: 'baidu.com'},
		     		{text: '谷歌', value: 'google.com'},
		     		{text: '必应', value: 'bing.com'}
		     	]
		    }
		  });
		</script>
	</body>
</html>
取自“http://www.openbrains.net/mediawiki/index.php?title=Vue从入门到实战：选择框&oldid=24914”