03: vuejs进阶篇

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：多选框可以设置多个；单选框只能设置一个

1.1 多选框 v-model

1.2 单选框

猜你喜欢