码路教育

06-动态类名与行内样式

6/3/2022

# 1, 绑定class

# 1.1, 绑定class有两种方式

  • 第一种写法:动态类名支持单个状态写法
  • 第二种写法:对象的写法
  • 第三种写法:数组的写法
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
     <!-- 引入Vue.js，人家向外暴露一个Vue类  new Vue -->
    <script src="../lib/vue2.7.8.js"></script>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .box{
            width: 500px;
            height: 500px;
            background-color: gold;
        }
        .box1{
            font-size: 30px;
        }
        .ok{
            width: 200px;
            height: 200px;
            background-color: skyblue;
            color: green;
        }
        .bad{
            width: 200px;
            height: 200px;
            background-color: pink;
            color: red;
        }
        .box3{
            cursor: pointer;
        }
    </style>
</head>
<body>  
    <!-- 定义的容器 -->
    <div id="app">
        <!-- 现在两个类名都是写死的 -->
        <!-- <div class="box box1">我是一个孤独的DIV</div> -->

        <!-- 动态类名的写法  box2是一个状态 -->
        <!-- 在一个标签上，即可以写动态类型，也可以写非动态类型 -->
        <div :class="box2" class="box3">动态类名-单个状态的写法</div>
    </div>

    <script>
        let vm = new Vue({
            el:"#app",
            data(){
                return {
                    box2:"bad"
                }
            }
        });
    </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
     <!-- 引入Vue.js，人家向外暴露一个Vue类  new Vue -->
    <script src="../lib/vue2.7.8.js"></script>
    <style>
        .one{
            color: red;
        }
        .two{
            background-color: gold;
        }
        .three{
            font-size: 18px;
        }
        .four{
            cursor: pointer;
        }
    </style>
</head>
<body>  
    <!-- 定义的容器 -->
    <div id="app">
        <!-- 动态类名 对象的定法
            :class后面跟一个对象  { K:V }
        -->
        <div :class="obj">
            千里之行，始于足下。——老子
        </div>
    </div>

    <script>
        let vm = new Vue({
            el:"#app",
            data(){
                return {
                    obj:{
                        // 键表示类名  值表示是否有这个类
                        one:true,
                        two:true,
                        three:false,
                        four:0
                    }
                }
            }
        });
    </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
     <!-- 引入Vue.js，人家向外暴露一个Vue类  new Vue -->
    <script src="../lib/vue2.7.8.js"></script>
    <style>
        .one{
            color: red;
        }
        .two{
            background-color: gold;
        }
        .three{
            font-size: 18px;
        }
        .four{
            cursor: pointer;
        }
    </style>
</head>
<body>  
    <!-- 定义的容器 -->
    <div id="app">
        <div :class="['one','two','three']">
            精诚所至，金石为开。——蔡锷
        </div>
        <hr>
        <p :class="arr">
            成功的秘诀，在永不改变既定的目的
        </p>
    </div>

    <script>
        let vm = new Vue({
            el:"#app",
            data(){
                return {
                    arr:["one","two"]
                }
            }
        });
        // 总结动态类名：
        //    1）:class="box1"   就可以操作box1这个状态了
        //    2）:class="obj"  obj:{ a:true,b:true,c:false }   有a和b类，没有c类  操作obj对象
        //    3）:class="arr"   arr:[a,b,c]  操作数组
    </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

菜单的制作

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入Vue.js，人家向外暴露一个Vue类  new Vue -->
    <script src="../lib/vue2.7.8.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            width: 150px;
            list-style-type: none;
            background-color: gold;
        }
        li{
            width: 100%;
            height: 50px;
            text-align: center;
            line-height: 50px;
            border-bottom: 1px solid white;
            color: red;
        }
        .active{
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <!-- 定义的容器 -->
    <div id="app">
        <ul>
            <li v-for="(item,index) in list" @click="hander(index)" :class="{active:currentIndex===index}">
                {{item.title}} -- {{index}}
            </li>
        </ul>
    </div>

    <script>
        let vm = new Vue({
            el: "#app",
            data() {
                return {
                    list: [
                        { id: 1001, title: '母婴' },
                        { id: 1002, title: '家电' },
                        { id: 1003, title: '医用' },
                        { id: 1004, title: '手机' },
                        { id: 1005, title: '直播' },
                        { id: 1006, title: '游戏' },
                        { id: 1007, title: '酒水' },
                        { id: 1008, title: '娱乐' },
                        { id: 1009, title: '美食' },
                        { id: 1010, title: '财经' }
                    ],
                    // 存储触摸的li
                    currentIndex:-1
                }
            },
            methods:{
                hander(index){
                    console.log(index);
                    this.currentIndex = index;
                }
            }
        });
    </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74

# 2, 绑定style

# 2.1, 动态行内样式语法

CSS property 名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
     <!-- 引入Vue.js，人家向外暴露一个Vue类  new Vue -->
    <script src="../lib/vue2.7.8.js"></script>
</head>
<body>  
    <!-- 定义的容器 -->
    <div id="app">
        <!-- 写死的行内样式，不是动态的行内样式 -->
        <!-- <div style="width: 300px; height: 100px; background: gold;">
            任何人都应当有自尊心，自信心，独立性，不然就是奴才
        </div> -->

        <!-- :style后面有两种写法：对象的写法 -->
        <!-- 如果css属性中包含- 需要转成小驼峰的写法 -->
        <div :style="{width:'200px', height:'200px', backgroundColor:'red'}">
            任何人都应当有自尊心，自信心，独立性，不然就是奴才
        </div>
        <hr>
        <p :style="obj">
            任何人都应当有自尊心，自信心，独立性，不然就是奴才
        </p>
    </div>

    <script>
        let vm = new Vue({
            el:"#app",
            data(){
                return {
                    // vm.obj.color = "red" 通过这种形式添加的数据并不是响应式数据
                    // 数据也确实添加上去了
                    // 不是响应式数据，就意味着页面不会更新
                    // 添加color不是响应式数据
                    obj:{
                        width:"200px",
                        height:"200px",
                        // vm.obj.background = "gold"   修改响应式数据，模板会更新
                        background:"skyblue"
                    }

                    // 后期想给obj上添加响应式数据，如何添加？
                    // 答：$set

                    // 删除一个响应式数据，使用$delete
                }
            }
        });
        vm.$set(vm.obj,"color","red")
    </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
     <!-- 引入Vue.js，人家向外暴露一个Vue类  new Vue -->
    <script src="../lib/vue2.7.8.js"></script>
</head>
<body>  
    <!-- 定义的容器 -->
    <div id="app">
        <!-- <p :style="[{color:'red',background:'skyblue'},{height:'300px'}]">
            任何人都应当有自尊心，自信心，独立性，不然就是奴才
        </p> -->
        <hr>
        <!-- <p :style="[obj1,obj2]">
            任何人都应当有自尊心，自信心，独立性，不然就是奴才
        </p> -->
        <hr>
        <p :style="arr">
            任何人都应当有自尊心，自信心，独立性，不然就是奴才
        </p>
    </div>

    <script>
        let vm = new Vue({
            el:"#app",
            data(){
                return {
                    obj1:{color:'red',background:'skyblue'},
                    obj2:{height:'300px'},
                    arr:[
                        {color:'red',background:'skyblue'},
                        {height:'300px'},
                    ]
                }
            }
        });

        // 总结动态的行内样式
        //   1）:style="对象"  对象也可以放到状态中   操作状态   重点掌握对象的写法
        //   2）:style="数组"  了解
    </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

动态行内样式练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
     <!-- 引入Vue.js，人家向外暴露一个Vue类  new Vue -->
    <script src="../lib/vue2.7.8.js"></script>
</head>
<body>  
    <!-- 定义的容器 -->
    <div id="app">
        <!-- <button @click="handle">点击放大P标签中的字体大小</button> -->
        <button @click="fs+=5">点击放大P标签中的字体大小</button>
        <p :style="{fontSize: fs+'px'}">任何人都应当有自尊心，自信心，独立性，不然就是奴才</p>
    </div>

    <script>
        let vm = new Vue({
            el:"#app",
            data(){
                return {
                    fs:16
                }
            },
            methods:{
                handle(){
                    this.fs += 5
                }
            }
        });
    </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

调色板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
     <!-- 引入Vue.js，人家向外暴露一个Vue类  new Vue -->
    <script src="../lib/vue2.7.8.js"></script>
    <style>
        *{
            margin:0;
            padding: 0;
        }
        .box{
            width: 400px;
            height: 200px;
            background-color: #000;
        }
        input{
            margin: 10px 0px;
        }
    </style>
</head>
<body>  
    <!-- 定义的容器 -->
    <div id="app">
        <!-- <div class="box" :style="{background:rgb}"></div> -->
        <div class="box" :style="{background:`rgb(${r},${g},${b})`}"></div>
        <p>
            R: <input type="range" min="0" max="255" v-model.number="r"><span>{{r}}</span>
        </p>
        <p>
            G: <input type="range"  min="0" max="255" v-model.number="g"><span>{{g}}</span>
        </p>
        <p>
            B: <input type="range"  min="0" max="255" v-model.number="b"><span>{{b}}</span>
        </p>
    </div>

    <script>
        let vm = new Vue({
            el:"#app",
            data(){
                return {
                    r:0,
                    g:0,
                    b:0
                }
            },
            computed:{
                // rgb(){
                //     return `rgb(${this.r},${this.g},${this.b})`
                // }
            }
        });
    </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
Last Updated: 12/25/2022, 10:02:14 PM

07-数组更新检测与Vue生命周期