Vue第6话 class与style绑定

逆流者 2020年01月04日 45次浏览

class/style 绑定用来实现动态样式效果

1. class 绑定

  • 格式 :class='exp'
  • 表达式是字符串: 'classA'
  • 表达式是对象: {classA: isA, classB: isB}
  • 表达式是数组: ['classA', 'classB']

2. style 绑定

  • 格式 :style="{ color: activeColor, fontSize: fontSize + 'px' }"
  • activeColor/fontSize 是 data 属性

3. 编码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03-class与style绑定</title>
    <style>
        .classA {
            color: red;
        }
        .classB {
            background: deepskyblue;
        }
        .classC {
            font-size: 20px;
        }
    </style>
</head>
<body>
<div id="app-4">
    <h2>1、class绑定: :class='xxxx'</h2>
    <p class="classB" :class="a">表达式是字符串: .classA</p>
    <p :class="{classA: isA, classB: isB}">表达式是对象: {classA: isA, classB: isB}</p>
    <p :class="['classA', 'classC']">表达式是数组: ['classA', 'classC']</p>

    <h2>2、style 绑定</h2>
    <p :style="{color, fontSize}">style="{color: activeColor, fontSize: fontSize + 'px'}"</p>

    <button @click="update">更新</button>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    new Vue({
        el: '#app-4',
        data: {
            "a": 'classA',
            "isA": true,
            "isB": false,
            "color": 'red',
            "fontSize": '20px'
        },
        methods: {
            update () {
                this.a = 'classC';
                this.isA = !this.isA;
                this.isB = !this.isB;
                this.color = 'blue';
                this.fontSize = '40px'
            }
        }
    });
</script>
</body>
</html>