1.1 多选框 v-model
1、双向绑定也要通过v-model指令
1. 一组多选框元素之间通过v-model指令绑定不同的数据,为了访问方便,通常我们将这些数据存储在同一个变量下
2. 数据的属性值是一个布尔值,不是布尔值会转化:True:选中; False:未选中(‘’, 0, undefined, null, false,NaN)
3. 如果想自定义选中或未选中时候的值,我们可以通过v-bind:true-value和v-bind:false-value来设置
4. 由于应用了v-bind指令,所以属性值是js环境,字符串要加上引号
5. 此时v-model绑定的数据布尔值失效,只能是设置的true-value或者false-value的值
6. 在html中,让选框元素选中,可以通过checked属性设置,我们也可以通过checked属性来让多选框选中
注:1.0 checked优先级高于绑定的数据; 2.0 checked优先级低于绑定的数据
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="app"> <label>选择你喜欢的运动</label> <p><label>足球<input v-model="sports.football" type="checkbox" v-bind:true-value="'选中了足球'" v-bind:false-value="falseValue" ></label></p> <p><label>篮球<input v-model="sports.basketball" type="checkbox" ></label></p> <p><label>乒乓球<input v-model="sports.pingpang" type="checkbox" ></label></p> <h1>选中结果: {{sports}}</h1> </div> <script type="text/javascript" src="vue.js"></script> <script type="text/javascript"> var app = new Vue({ el: "#app", data: { // 绑定数据 sports: { football: '选中了足球', basketball: 0, pingpang: false }, falseValue: '没有选中足球' // 定义未选中时候的文案 } }) </script> </body> </html>
1.2 单选框
1、单选框
1. 数据单向绑定也要通过v-model指令,一组单选框,绑定的属性值是同一个变量
2. 单选框的值通过value属性定义,单选框之间value的属性值不能相同
3. 在html中,让单选框选中,可以通过checked属性设置,我们也可以通过checked属性让单选框选中
注:1.0 checked优先级高于绑定的数据;2.0 checked优先级低于绑定的数据;在1.0中,一组单选框绝对不能设置多个checked属性
2、比较单选框和多选框
1. 多选框绑定不同的值,并且定义在同一个变量下,单选框绑定的是同一个值
2. 多选框通过v-bind:true-value和v-bind:false-value设置选中或者未选中时候的值,单选框通过value来设置选框的值
3. checked:多选框可以设置多个;单选框只能设置一个