Vue从入门到实战:值绑定

来自CloudWiki
Cloud17讨论 | 贡献2021年2月10日 (三) 01:08的版本 (创建页面,内容为“==应用背景== 对于单选按钮,复选框及选择框的选项,v-model 绑定的值通常是静态字符串 (对于复选框也可以是布尔值): <now…”)
(差异) ←上一版本 | 最后版本 (差异) | 下一版本→ (差异)
跳转至: 导航搜索

应用背景

对于单选按钮,复选框及选择框的选项,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属性的值-假。

单选按钮