Vue——v-bind及class与style绑定

在数据绑定中，最常见的就是元素样式名称class和内联样式style的动态绑定。

1.绑定class的几种方式

（1）对象语法

给v-bind:class绑定一个对象，通过对象的真假来切换class。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
    <div id="app">
        <div v-bind:class="{'active': isActive}"></div>
        <!--类名active会依赖数据isActive，当其为true的时候会拥有类名active，当其为false的时候没有-->
    </div>
    <script>
        var app = new Vue({
            el:"#app",
            data: {
                isActive: true
            }
        });
    </script>
</body>
</html>

渲染结果：

<div class="active"></div>

对象之中可以传入多个属性，来动态切换class，另外，:class可以与普通class共存。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
    <div id="app">
        <div class="static" :class="{ 'active':isActive, 'error':isError }"></div>
    </div>

    <script>
        var app = new Vue({
            el: "#app",
            data: {
                isActive: true,
                isError: true
            }
        })
    </script>
</body>
</html>

渲染结果：

<div class="static active error"></div>

当class表达式过长或逻辑复杂时，可以绑定一个计算属性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.min.js"></script>
</head>
<body>
<div id="app">
    <div :class="classes"></div>
</div>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            isActive: true,
            error:null
        },
        computed: {
            classes: function () {
                return {
                    active: this.isActive && !this.error,  //true && true == true
                }
            }
        }
    })
</script>
</body>
</html>

（2）数组语法

当需要应用多个class时，可以使用数组语法，给：class绑定一个数组，应用一个class列表。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
    <div id="app">
        <div :class="[activeCls, errorCls]"></div>
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                activeCls: 'active',
                errorCls: 'error'
            }
        })
    </script>

</body>
</html>

渲染结果：

<div class="active error"></div>

可以使用三元表达式来判断。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
    <div id="app">
        <div :class="[isActive ? activeCls : '', errorCls]"></div>
        <!--对象语法和数组语法混用-->
        <div :class="[{'active' : isActive}, errorCls]"></div>

    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                isActive: true,
                activeCls: 'active',
                errorCls: 'error'
            }
        })
    </script>
</body>
</html>

2.绑定内联样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
    <div id="app">
        <div :style="{'color':color,'fontSize':fontSize + 'px'}">文本</div>
    </div>
    <script>
        var app = new Vue({
            el:"#app",
            data: {
                color: 'yellow',
                fontSize:34
            }
        })
    </script>

</body>
</html>

还可以在data中直接定义。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
    <div id="app">
        <div :style="styles">实例</div>
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            //直接将样式写到data里面会更快捷
            data: {
                styles: {
                    color:'yellow',
                    fontSize: '34px'
                }
            }
            // 使用计算属性也是可以
            // computed:{
            //     styles: function () {
            //         return {
            //         color:'yellow',
            //         fontSize: '34px'
            //     }
            //     }
            }
        })
    </script>
</body>
</html>