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

バインディングクラス

方法1:

オブジェクト構文: オブジェクトを v-bind:class に渡してクラスを動的に切り替える
オブジェクト内のキーに対応する値がtrueの場合、キーはclassNameとしてラベルに追加されます。

。箱 {
    幅: 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
        }
    })
</スクリプト>

最初、ボックスは正方形です。クリックすると、円に切り替わります。もう一度クリックすると、正方形に切り替わります。

:class="{circle:isCircle}" は計算プロパティcomputedに書き込むこともでき、このオブジェクトを返します。

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

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

方法2:
配列構文: v-bind:classに配列を渡してクラスのリストを適用します
CSS は青い背景効果を追加します:

。青 {
    背景色: 青;
}

<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スタイル:

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

この方法で希望の色を.boxに設定できます

小さなデモ:

1. ボックスをクリックすると、円と四角形が切り替わります - インラインスタイルのバインディング
2. 初期のボックスの色は赤です。スタートボタンをクリックすると、1秒ごとに色（赤/青）が切り替わります。ボタンをもう一度クリックすると、色の切り替えがキャンセルされます - クラスバインディング

。箱 {
    幅: 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;
            }

        }
    }
})

効果：

Vue バインディングクラスとバインディングインラインスタイルの実装方法についてはこれで終わりです。Vue バインディングクラスとバインディングインラインスタイルの関連コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: