Vue中的样式绑定

Posted 2021-03-18 shengjunyong

一、动态绑定class

1、直接使用data数据

<style>
    .activated {
        color: red;
    }
</style>
<div id="app">
    <div :class="activated" @click="handleDivClick">
        Hello world
    </div>
</div>
<script>
    // var vm = new Vue({
    //     el: "#app",
    //     data: {
    //         isActivated: false
    //     },
    //     methods: {
    //         handleDivClick(){
    //             this.isActivated = !this.isActivated
    //         }
    //     }
    // })
    var vm = new Vue({
        el: "#app",
        data: {
            activated: ""
        },
        methods: {
            handleDivClick: function(){
                this.activated = this.activated === "activated" ? "" : "activated"
            }
        }
    })
</script>

 

2、多个类名用数组语法

<style>
    .activated {
        color: red;
    }
    .bg-color {
        background: yellow;
    }
</style>
<div id="app">
    <div :class="[activated,bgColor]" @click="handleDivClick">
        Hello world
    </div>
</div>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            activated: "",
            bgColor: "bg-color"
        },
        methods: {
            handleDivClick: function(){
                this.activated = this.activated === "activated" ? "" : "activated"
            }
        }
    })
</script>

 

3、class对象语法

<style>
    .activated {
        color: red;
    }
</style>
<div id="app">
    <div :class="{activated: isActivated}" @click="handleDivClick">
        Hello world
    </div>
</div>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            isActivated: false
        },
        methods: {
            handleDivClick(){
                this.isActivated = !this.isActivated
            }
        }
    })
</script>

 

二、动态绑定style

style动态绑定的css，也是以对象的形式写出

<style>
    .activated {
        color: red;
    }
    .bg-color {
        background: yellow;
    }
</style>
<div id="app">
    <div :style="styleObj" @click="handleDivClick">
        Hello world
    </div>
</div>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            styleObj:{
                color: "black",
                background: "yellow"
            }
        },
        methods: {
            handleDivClick(){
                this.styleObj.color = this.styleObj.color === "black" ? "red" : "black"
            }
        }
    })
</script>

同样也可以通过数组，绑定多个对象，font-size写成属性可以写成fontSize, 或者font-size加单引号

 <div :style="[styleObj,{fontSize:‘20px‘}]" @click="handleDivClick">
        Hello world
    </div>