Vue.js Class 与 Style 绑定

Posted 2020-09-01 米娜-火箭

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue.js Class 与 Style 绑定相关的知识，希望对你有一定的参考价值。

绑定 Class

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>class</title>
    <style>
        span{
            display:inline-block;
        }
        .static{
            border:5px solid #000;
        }
        .active{
            width:100px;
            height:100px;
            color:#000;
        }
        .text-danger{
            background: greenyellow;
        }
    </style>
</head>
<body>
    <div id="class">
        <span class="static" v-bind:class="{ active: activeClass, \'text-danger\': errorClass }">1</span>

        <span v-bind:class="[activeClass, errorClass]">2</span>

        <span v-bind:class="classObject">3</span>

        <span v-bind:class="classObject1">4</span>

        <span v-bind:class="[isActive ? activeClass : \' \', errorClass]">5</span>
        <!--始终添加 errorClass ，但是只有在 isActive 是 true 时添加 activeClass -->
        <!--可写为：<div v-bind:class="[isActive : activeClass, errorClass]">5</div>-->
        <my-component class="static"></my-component>
        <!--可写为：<my-component v-bind:class="{ static: isActive }"></my-component>-->
    </div>
    <script src="js/vue.js"></script>
    <script>
        Vue.component(\'my-component\', {
            template: \'<span class="active text-danger">6</span>\'
        });
        var vm = new Vue({
            el:"#class",
            data: {
                activeClass: \'active\',
                errorClass: \'text-danger\',
                classObject: {
                    active: true,
                    \'text-danger\':true
                },
                isActive: true,
                error: null
            },
            computed: {
                classObject1: function () {
                    return {
                        active: this.isActive && !this.error,
                        \'text-danger\': !this.error
                    }
                }
            }
        })
    </script>
</body>
</html>

绑定Style

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>style</title>
</head>
<body>
<div id="style">
    <span v-bind:style="{color: activeColor, fontSize: fontSize + \'px\' }">1</span>

    <span v-bind:style="styleObject">4</span>

</div>
<script src="js/vue.js"></script>
<script>
    var vm = new Vue({
        el:"#style",
        data: {
            activeColor: \'red\',
            fontSize:16,
            styleObject: {
                color: \'red\',
                fontSize: \'16px\'
            }
        }
    })
</script>
</body>
</html>

以上是关于Vue.js Class 与 Style 绑定的主要内容，如果未能解决你的问题，请参考以下文章

Vue.js Class与Style绑定

Vue.js Class 与 Style 绑定

vue.js实战学习——v-bind 及class与 style绑定

Vue.js 实战教程 V2.xClass与Style绑定