Vue从入门到实战：值绑定

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

应用背景

对于单选按钮，复选框及选择框的选项，v-model 绑定的值通常是静态字符串 (对于复选框也可以是布尔值)： 

 <!-- 当选中时，`picked` 为字符串 "a" -->
<input type="radio" v-model="picked" value="a">

<!-- `toggle` 为 true 或 false -->
<input type="checkbox" v-model="toggle">

<!-- 当选中第一个选项时，`selected` 为字符串 "abc" -->
<select v-model="selected">
  <option value="abc">ABC</option>
</select>

但是有时我们可能想把值绑定到 Vue 实例的一个动态 property 上，这时可以用 v-bind 实现，并且这个 property 的值可以不是字符串。

复选框

在使用单个复选框时，在<input>元素上可以使用两个特殊的属性true-value和false-value来指定选中状态下和未选中状态下v-model绑定的值是什么 

 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id = "app">
			<!--
			<input id="agreement" type="checkbox" v-model="isAgree"
			  	true-value="yes"
			  	false-value="no">
			-->
			<input id="agreement" type="checkbox" v-model="isAgree"
			  	:true-value="trueVal"
			  	:false-value="falseVal">
			<label for="agreement">{{ isAgree }}</label>
		</div>
	
		<script src="vue.js"></script>
		<script>
			var vm = new Vue({
		    el: '#app',
		    data: {
		    	isAgree: false,
		    	trueVal: '真',
		    	falseVal: '假'
		    }
		  });
		</script>
	</body>
</html>

数据属性isAgree的值初始为false ，当选中复选框时，其值为true-value属性的值--真，之后再取消复选框，其值为false-value属性的值-假。

单选按钮

单选按钮被选中时，v-model绑定的数据属性的值默认被设置为该单选按钮的value值，可以使用v-bind将<input>元素的value属性再绑定到另一个数据属性上，这样选中后的值就是这个value属性绑定的数据属性的值。 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id = "app">
			<input id="male" type="radio" v-model="gender"
					:value="genderVal[0]">
			<label for="male">男</label>
			<br>
			<input id="female" type="radio" v-model="gender"
					:value="genderVal[1]" >
			<label for="female">女</label>
			<br>
			<span>性别：{{ gender }}</span>
		</div>
	
		<script src="vue.js"></script>
		<script>
			var vm = new Vue({
		    el: '#app',
		    data: {
		    	gender: '',
		    	genderVal: ['帅哥', '美女']
		    }
		  });
		</script>
	</body>
</html>

选择框的选项

选择框选择内容后其值是选项的值（<option>元素的value属性的值），选项的value属性也可以使用v-bind指令绑定到一个数据属性上。 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id = "app">
			<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: {
		     	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=24917”