So implementieren Sie die Vue-Bindungsklasse und den Inline-Bindungsstil

.Kasten {
    Breite: 100px;
    Höhe: 100px;
    Hintergrundfarbe: grau;
}
.Kreis {
    Randradius: 50 %;
}

<div id="app">
    <div class="box" @click="isCircle = !isCircle" :class="{circle:isCircle}"></div>
    <!--Wenn isCircle wahr ist, wird dem Klassennamen des Div ein Kreis hinzugefügt-->
    <p>{{isCircle}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<Skript>
    neuer Vue({
        el:"#app",
        Daten:{
            isCircle: false
        }
    })
</Skript>

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

berechnet:{
        divÄndern:Funktion(){
            zurück {circle:this.isCircle}
        }
    }

.Blau {
    Hintergrundfarbe: blau;
}

<div id="app">
    <div Klasse="box" v-on:click="clickFun()" :class="[Farbe,divChange()]"></div>
    <p>{{isCircle}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<Skript>
    neuer Vue({
        el:"#app",
        Daten:{
            isCircle: falsch,
            Farbe:""
        },
        Methoden:{
            divChange: Funktion(){
                zurück {circle:this.isCircle}
            },
            KlickFun: Funktion(){
                dies.istKreis = !dies.istKreis;
                wenn (dies.istKreis){
                    diese.Farbe = "blau"
                }anders{
                    diese.farbe = ""
                }
            }
        }
    })
</Skript>

<div id="app">
 <!--Inline-Stile binden-->
    <div Klasse="box" v-on:click="clickFun()" :style="divStyle"></div>
    <p>{{isCircle}}</p>
</div>

divStyle: Funktion(){
    zurückkehren {
        Hintergrundfarbe:diese.Farbe
    }
}

.Kasten {
    Breite: 100px;
    Höhe: 100px;
    Hintergrundfarbe: rot;
}

.Blau {
    Hintergrundfarbe: blau;
}

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

neuer Vue({
    el: "#app",
    Daten: {
        isCircle: falsch,
        borderRadius: { borderRadius: "50%" },
        isStart: false,
        isBlue: falsch,
        Timer: null
    },

    Methoden: {
        changeStyle: Funktion () {
            wenn (this.borderRadius.borderRadius == "0%") {
                this.borderRadius.borderRadius = "50 %"
            } anders {
                this.borderRadius.borderRadius = "0 %"
            }
        },
        startClick: Funktion () {
            dies.istStart = !dies.istStart;
        }
    },

    betrachten:
        isStart: Funktion (Wert) {
            var vm = dies;
            wenn (Wert) {
                console.log("Farbwechsel aktivieren")
                dieser.Timer = setzeIntervall(Funktion () {
                    vm.isBlue = !vm.isBlue
                }, 1000)
            }anders{
                console.log("Timer abbrechen, Farbwechsel stoppen")
                : ClearInterval(dieser.Timer);
                dieser.timer = null;
            }

        }
    }
})