vue2[初级] 样式属性class与style的绑定本节内容

157 阅读 0 评论 104 点赞

我是靠谱客的博主细腻招牌，这篇文章主要介绍vue2[初级] 样式属性class与style的绑定本节内容，现在分享给大家，希望可以做个参考。

本节内容

class样式绑定与style样式绑定

绑定使用v-bind:需要绑定的属性或事件可以简写成:需要绑定的属性或事件

class样式与style样式绑定都是动态的方便控制页面元素展示效果

复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

<hr>
    <h2>class样式绑定</h2>
    
    <p class="aClass">class样式绑定</p>
    
    <p :class="a">class样式绑定</p>
    <button @click="change">修改</button>
    <hr>
    <h2>多种class样式绑定</h2>
    
    <p class="aClass cClass">多种样式class属性绑定</p>
    
    <p :class="{aClass:isA,cClass:isB}">多种样式class属性绑定</p>
    <button @click="change2">修改</button>

<hr>
    <h2>style内联样式绑定</h2>
    
    <p style="color: #b300ff;font-size: 30px;">内联样式绑定</p>
    
    <p :style="{color:activeColor222,fontSize:fontSize22+'px'}">内联样式绑定</p>
    <button @click="change3">修改</button>
</div>

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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .aClass{
            color:red;
        }
        .bClass{
            color:green;
        }
        .cClass{
            font-size: 30px;
        }
    </style>
</head>
<body>
<div id="app">

    <hr>
    <h2>class样式绑定</h2>
    <!--
    原生的class样式 直接引用style中的样式
    -->
    <p class="aClass">class样式绑定</p>
    <!--
    vue中class样式绑定 :class是v-bind:class的简写
    其中a是变量 用来动态指定class样式
    -->
    <p :class="a">class样式绑定</p>
    <button @click="change">修改</button>
    <hr>
    <h2>多种class样式绑定</h2>
    <!--
    原生的class样式 直接引用style中的样式
    -->
    <p class="aClass cClass">多种样式class属性绑定</p>
    <!--
       vue中多种样式绑定时使用单个大括号并且使用逗号隔开
       data中添加isA和isB的值 动态改变可以用方法来动态改变选取的样式
     -->
    <p :class="{aClass:isA,cClass:isB}">多种样式class属性绑定</p>
    <button @click="change2">修改</button>

    <hr>
    <h2>style内联样式绑定</h2>
    <!--
    原生内联样式
    -->
    <p style="color: #b300ff;font-size: 30px;">内联样式绑定</p>
    <!--
    vue中style的内联样式绑定
    -->
    <p :style="{color:activeColor222,fontSize:fontSize22+'px'}">内联样式绑定</p>
    <button @click="change3">修改</button>
</div>

<script type="text/javascript" src="../js/vue2.6.js"></script>
<script type="text/javascript">
    let count=0;
    new Vue({
        el:'#app',
        data:{
            a:'aClass', // 这里指定style中的样式表
            isA:true,
            isB:true,
            activeColor222:'red',
            fontSize22:30
        },
        methods:{
            change(){
                //this.a='bClass' // 这里是动态改变style中的样式表
                this.a = (this.a=='aClass'?'bClass':'aClass');// 动态切换不同的class样式
            },
            change2(){ // 多种样式绑定
                this.isB=(this.isB==true?false:true);
            },
            change3(){
                this.activeColor222='green';
                this.fontSize22=20;
            }
        }
    });
</script>
</body>
</html>