快捷導(dǎo)航

Vue綁定class和綁定內(nèi)聯(lián)樣式的實(shí)現(xiàn)方法

更新時(shí)間：2021年11月03日 11:26:17 作者：安之ccy

本文主要介紹了Vue綁定class和綁定內(nèi)聯(lián)樣式的實(shí)現(xiàn)方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

綁定class

方式一：

對(duì)象語(yǔ)法：給 v-bind:class傳一個(gè)對(duì)象，以動(dòng)態(tài)地切換 class
當(dāng)對(duì)象中某key對(duì)應(yīng)的值為true時(shí)，該key做為className被添加到標(biāo)簽上

.box {
    width: 100px;
    height: 100px;
    background-color: gray;
}
.circle {
    border-radius: 50%;
}

<div id="app">
    <div class="box" @click="isCircle = !isCircle" :class="{circle:isCircle}"></div>
    <!--當(dāng)isCircle為true時(shí)，該div的class名多加一個(gè)circle-->
    <p>{{isCircle}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    new Vue({
        el:"#app",
        data:{
            isCircle: false
        }
    })
</script>

初始化時(shí)box為方形，點(diǎn)擊時(shí)切換成圓形，再次點(diǎn)擊，切換成方形，以此類推

:class="{circle:isCircle}"還可以寫到計(jì)算屬性computed里，return這個(gè)對(duì)象

<div class="box" @click="isCircle = !isCircle" :class="divChange"></div>

computed:{
        divChange:function(){
            return {circle:this.isCircle}
        }
    }

方式二：
數(shù)組語(yǔ)法：把一個(gè)數(shù)組傳給 v-bind:class，以應(yīng)用一個(gè) class 列表
css多加一個(gè)藍(lán)色背景的效果：

.blue {
    background-color: blue;
}

<div id="app">
    <div class="box" v-on:click="clickFun()" :class="[color,divChange()]"></div>
    <p>{{isCircle}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    new Vue({
        el:"#app",
        data:{
            isCircle: false,
            color:""
        },
        methods:{
            divChange: function(){
                return {circle:this.isCircle}
            },
            clickFun: function(){
                this.isCircle = !this.isCircle;
                if (this.isCircle){
                    this.color = "blue"
                }else{
                    this.color = ""
                }
            }
        }
    })
</script>

綁定內(nèi)聯(lián)樣式

綁定內(nèi)聯(lián)樣式同樣可以用對(duì)象語(yǔ)法或數(shù)組語(yǔ)法，此處用對(duì)象語(yǔ)法和計(jì)算屬性結(jié)合的方法實(shí)例：

<div id="app">
 <!--綁定內(nèi)聯(lián)樣式-->
    <div class="box" v-on:click="clickFun()" :style="divStyle"></div>
    <p>{{isCircle}}</p>
</div>

divStyle：

divStyle: function(){
    return {
        backgroundColor:this.color
    }
}

這樣就可以將想要的顏色設(shè)置到.box上了

小demo：

1.點(diǎn)擊box時(shí)，切換圓形和方形 ——內(nèi)聯(lián)樣式綁定
2.初始box顏色為紅色，點(diǎn)擊開始按鈕，每隔一秒切換顏色（紅/藍(lán)），再次點(diǎn)擊按鈕后取消顏色切換 —— class綁定

.box {
    width: 100px;
    height: 100px;
    background-color: red;
}

.blue {
    background-color: blue;
}

<div id="app">
    <div class="box" :style="borderRadius" @click="changeStyle" :class="{blue: isBlue}"></div>
    <button @click="startClick">開始</button>
</div>

new Vue({
    el: "#app",
    data: {
        isCircle: false,
        borderRadius: { borderRadius: "50%" },
        isStart: false,
        isBlue: false,
        timer: null
    },

    methods: {
        changeStyle: function () {
            if (this.borderRadius.borderRadius == "0%") {
                this.borderRadius.borderRadius = "50%"
            } else {
                this.borderRadius.borderRadius = "0%"
            }
        },
        startClick: function () {
            this.isStart = !this.isStart;
        }
    },

    watch: {
        isStart: function (val) {
            var vm = this;
            if (val) {
                console.log("開啟顏色切換")
                this.timer = setInterval(function () {
                    vm.isBlue = !vm.isBlue
                }, 1000)
            }else{
                console.log("取消計(jì)時(shí)器，停止顏色切換")
                clearInterval(this.timer);
                this.timer = null;
            }

        }
    }
})

效果：

到此這篇關(guān)于Vue綁定class和綁定內(nèi)聯(lián)樣式的實(shí)現(xiàn)方法的文章就介紹到這了,更多相關(guān)Vue綁定class和綁定內(nèi)聯(lián)樣式內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: