“This is the 19th day of my participation in the Gwen Challenge.

The binding class

Object syntax: Pass an object to V-bind :class to dynamically switch classes. When the value of a key in the object is true, the key is added to the label as a className

.box {
    width: 100px;
    height: 100px;
    background-color: gray;
}
.circle {
    border-radius: 50%;
}
Copy the code
<div id="app">
    <div class="box" @click="isCircle = ! isCircle" :class="{circle:isCircle}"></div>
    <! When isCircle is true, add a circle to the class name of the 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}})</script>
Copy the code

Initialize box to a square, click to switch to a circle, click again to switch to a square, and so on

:class=”{circle:isCircle}” can also be written to the object computed, return

<div class="box" @click="isCircle = ! isCircle" :class="divChange"></div>
Copy the code
computed:{
        divChange:function(){
            return {circle:this.isCircle}
        }
    }
Copy the code

Pass an array to V-bind :class to apply a class list with a blue background to CSS:

.blue {
    background-color: blue;
}
Copy the code
<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>
Copy the code

Bind inline styles

The binding inline style can also be used with object syntax or array syntax. Here is an example of a method that combines object syntax and evaluated properties:

<div id="app">
	<! -- Bind inline style -->
    <div class="box" v-on:click="clickFun()" :style="divStyle"></div>
    <p>{{isCircle}}</p>
</div>
Copy the code

DivStyle:

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

So now you can put the color you want on the dot box

1. When clicking Box, toggle circles and squares — inline style binding 2. The initial box color is red, click the Start button, switch color every second (red/blue), click the button again to unswitch color — class binding

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

.blue {
    background-color: blue;
}
Copy the code
<div id="app">
    <div class="box" :style="borderRadius" @click="changeStyle" :class="{blue: isBlue}"></div>
    <button @click="startClick">start</button>
</div>
Copy the code
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("Turn on color switch")
                this.timer = setInterval(function () { vm.isBlue = ! vm.isBlue },1000)}else{
                console.log("Cancel the timer and stop the color switch.")
                clearInterval(this.timer);
                this.timer = null; }}}})Copy the code

Effect: