目錄

• 繫結class
• 繫結內聯樣式

繫結class

方式一：

物件語法：給 v-bind:class傳 一個物件，以動態地切換 class
當物件中某key對應的值為true時，該key做為className被新增到標籤上

.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>
    <!--當isCircle為true時，該div的class名多加一個circle-->
    <p>{{isCircle}}</p>
</div>
<script src="https://cdn.delivr.net/npm//dist/vue.js"></script>
<script>
    new Vue({
        el:"#app",data:{
            isCircle: false
        }
    })
</script>
http://www.cppcns.com
 

初始化時box為方形，點選時切換成圓形，再次點選，切換成方形，以此類推

:class="{circle:isCircle}"還可以寫到計算屬性computed裡，return這個物件

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

computed:{
        divChange:function(){
            return {circle:this.iswww.cppcns.comCircle}
        }
    }

方式二：
陣列語法：把一個數組傳給 v-bind:class，以應用一個 class 列表
多加一個藍色背景的效果：

.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){
                    thiswww.cppcns.com
 
.color = "blue"
                }else{
                    this.color = ""
                }
            }
        }
    })
</script>

繫結內聯樣式

繫結內聯樣式同樣可以用物件語法或陣列語法，此處用物件語法和計算屬性結合的方法例項：

<div id="app">
 <!--繫結內聯樣式-->
    <div class="box" v-on:click="clickFun()" :style="divStyle"></div>
    <p>{{isCircle}}</p>
</div>

divStyle：

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

這樣就可以將想要的顏色設定到.box上了

小demo：

1.點選box時，切換圓形和方形 ——內聯樣式繫結
2.初始box顏色為紅色，點選開始按鈕，每隔一秒切換顏色（紅/藍），再次點選按鈕後取消顏色切換 —— 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("取消計時器，停止顏色切換")
                clearInterval(this.timer);
                this.timer = null;
            }

        }
    }
})

效果：

到此這篇關於Vue繫結class和繫結內聯樣式的實現方法的文章就介紹到這了,更多相關Vue繫結class和繫結內聯樣式內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！