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

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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue.js スタイルの動的バインディング実装の概要
  • Vue スタイルバインディングの実装方法
  • Vue フレームワークの動的バインディング CSS スタイルの例の分析
  • Vue バインディングのインライン スタイルの問題
  • Vueのスタイルバインディングの詳細な説明

<<:  CSS で点線の境界線のスクロール効果を実装するサンプルコード

>>:  Dockerがコンテナサービスを停止または削除できない問題の解決策

推薦する

Nginx ログ管理の概要

Nginx ログの説明アクセス ログを通じて、ユーザーの地理的起源、ジャンプ元、使用端末、特定の U...

HTMLにビデオを挿入してすべてのブラウザと互換性を持たせる方法

HTML にビデオを挿入するために最もよく使用される方法は 2 つあります。1 つは古い <o...

JavaScriptのループの違いについての詳細な説明

目次序文列挙可能なプロパティ反復可能なオブジェクトforEachメソッドとmapメソッドチェーン呼び...

Mac に Windows サービスを備えた仮想マシンをインストールする方法

1. 仮想マシンをダウンロードする公式ダウンロードウェブサイト: https://www.vmwar...

React Nativeプロジェクトフレームワークの構築経験

React Native は、2015 年 4 月に Facebook によってオープンソース化され...

よく忘れられがちな CSS のヒント 26 選

これは、よく使われるけれども忘れられがちな CSS 実装方法のコレクションです。抜けや追加があれば、...

Keras を使って SQL インジェクション攻撃を判断する (例の説明)

この記事では、ディープラーニングフレームワーク keras を使用して、SQL インジェクションの特...

Alibaba Cloud Server Linux システムは Tomcat を構築して Web プロジェクトを展開します

私は全体のプロセスを 4 つのステップに分けます。 JDKをダウンロードしてインストールするTomc...

MYSQL ログとバックアップおよび復元の問題の詳細な説明

この記事では、参考までにMYSQLログとバックアップとリストアについて紹介します。具体的な内容は以下...

Reactコンポーネントをフルスクリーンにする方法

導入この記事は、 React + antdをベースにして、完全な全屏demoを紹介します。その理由は...

ウェブページの表の分割線を削除する方法

<br />Web テーブルの分割線を削除する方法。実際、上記の 3 つの表はいずれも ...

AngularでTweenMaxアニメーションライブラリを使用する際の問題と解決策

最近何もすることがないのでCSSをいじっていますより良いアニメーションライブラリTweenMaxを見...

React 構成 px 変換 rem メソッド

関連する依存関係をインストールするnpm i lib-flexible --save npm i p...

1つの記事でNavicat for MySQLの基本を理解する

目次1. データベース操作2. データ型3. バックアップとリカバリ3. 操作4. 上級5. 知識補...

一定時間後にNavicatがデータベースから自動的に切断される問題の解決方法

これは、データベース サーバーが、接続が多すぎるのを避けるために、一定時間非アクティブな状態が続くと...