样式绑定

class属性绑定（普通）

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <style>
        .active {
            width: 100px;
            height: 100px;
            background: green;
        }
        .text-danger {
            width: 100px;
            height: 100px;
            background: red;
        }
    </style>
</head>
<body>
<div id="app">
    <div v-bind:class="{active:isActive, 'text-danger':isTextDanger}"></div>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            isActive: true,
            isTextDanger: false
        }
    })
</script>
</body>
</html>

class属性绑定（对象）

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <style>
        .active {
            width: 100px;
            height: 100px;
            background: green;
        }
        .text-danger {
            width: 100px;
            height: 100px;
            background: red;
        }
    </style>
</head>
<body>
<div id="app">
    <div v-bind:class="objectClass"></div>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            objectClass:{
                active: false,
                'text-danger': true
            }

        }
    })
</script>
</body>
</html>

class属性绑定（数组）

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <style>
        .active {
            width: 100px;
            height: 100px;
            background: green;
        }
        .text-danger {
            width: 100px;
            height: 100px;
            background: black;
        }
    </style>
</head>
<body>
<div id="app">
    <div v-bind:class="['active', 'text-danger']"></div>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            objectClass:{
                active: false,
                'text-danger': true
            }

        }
    })
</script>
</body>
</html>

style内联样式绑定（普通）

<body>
<div id="app">
    <div v-bind:style="{color:isColor, fontSize:isFontSize}">
        test
    </div>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
                isColor: 'green',
                isFontSize: '30px'

        }
    })
</script>
</body>

style内联样式绑定（对象）

<body>
<div id="app">
    <div v-bind:style="objClass">
        test
    </div>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            objClass: {
                color: 'red',
                fontSize: '30px'

            }

        }
    })
</script>
</body>

style内联样式绑定（数组）

<body>
<div id="app">
    <div v-bind:style="[colorText,fontText]">
        test
    </div>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            colorText:{
                color:'blue'
            },
            fontText:{
                fontSize: '30px'
            }


        }
    })
</script>
</body>

注意：

class属性绑定时候如果是访问内部样式key如果是有-那这个key要加单引号。

class属性绑定如果是数组形式，访问内部样式这时候元素要加单引号。

注意：

猜你喜欢