Vueバインディングクラスとバインディングインラインスタイルの実装方法

。箱 {
    幅: 100ピクセル;
    高さ: 100px;
    背景色: グレー;
}
。丸 {
    境界線の半径: 50%;
}

<div id="アプリ">
    <div class="box" @click="isCircle = !isCircle" :class="{circle:isCircle}"></div>
    <!--isCircle が true の場合、div のクラス名に円が追加されます -->
    <p>{{isCircle}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<スクリプト>
    新しいVue({
        el:"#アプリ",
        データ：{
            isCircle: false
        }
    })
</スクリプト>

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

計算:{
        divChange:関数(){
            {circle:this.isCircle} を返します
        }
    }

。青 {
    背景色: 青;
}

<div id="アプリ">
    <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>
<スクリプト>
    新しいVue({
        el:"#アプリ",
        データ：{
            isCircle: false、
            色：""
        },
        方法:{
            divChange: 関数(){
                {circle:this.isCircle} を返します
            },
            クリックファンクション: 関数(){
                this.isCircle = !this.isCircle;
                if (this.isCircle){
                    this.color = "青"
                }それ以外{
                    this.color = ""
                }
            }
        }
    })
</スクリプト>

<div id="アプリ">
 <!--インライン スタイルをバインド-->
    <div class="box" v-on:click="clickFun()" :style="divStyle"></div>
    <p>{{isCircle}}</p>
</div>

divスタイル: 関数(){
    戻る {
        背景色:this.color
    }
}

。箱 {
    幅: 100ピクセル;
    高さ: 100px;
    背景色: 赤;
}

。青 {
    背景色: 青;
}

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

新しいVue({
    el: "#app",
    データ： {
        isCircle: false、
        境界半径: { 境界半径: "50%" },
        isStart: false、
        isBlue: false、
        タイマー: null
    },

    メソッド: {
        スタイルの変更: 関数 () {
            (this.borderRadius.borderRadius == "0%") の場合 {
                this.borderRadius.borderRadius = "50%"
            } それ以外 {
                this.borderRadius.borderRadius = "0%"
            }
        },
        スタートクリック: 関数 () {
            this.isStart = !this.isStart;
        }
    },

    時計：
        isStart: 関数 (val) {
            var vm = this;
            if (値) {
                console.log("色の切り替えを有効にする")
                this.timer = setInterval(関数() {
                    vm.isBlue = !vm.isBlue
                }, 1000)
            }それ以外{
                console.log("タイマーをキャンセルし、色の切り替えを停止します")
                タイマー間隔をクリアします。
                this.timer = null;
            }

        }
    }
})