6.Vue绑定样式

6.Vue绑定样式

绑定class

通过v-bind:class来绑定class

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<style>
		
    .active {
        color: red;
    }

</style>
<body>

    <div id='app' v-bind:class='{active: isActive}'>aa</div>

</body>
<script>

    new Vue({
        el: '#app',
        data: {
            isActive: true				//当isActive为true时active生效
        }
    })

</script>

绑定css

通过v-bind:style来绑定css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<body>
		
    <div id='app' v-bind:style='styleObject'>aa</div>

</body>
<script>

    new Vue({
        el: '#app',
        data: {
            styleObject: {				//通过声明数据对象来绑定css
                color: 'red',
                fontSize: '20px'
            }
        }
    })

</script>

注意:

  1. 原来的class/style不会被覆盖掉
  2. 可以用[{...}. {...}, ...]来绑定多个
  3. 也可以声明数据对象来绑定多个
学习笔记 > 前端 > Vue
#前端 #Vue
6.Vue绑定样式
http://xwww12.github.io/2022/08/03/前端/vue/6.Vue绑定样式/
作者
xw
发布于
2022年8月3日
许可协议