バインディングクラス方法1: オブジェクト構文: オブジェクトを v-bind:class に渡してクラスを動的に切り替える 。箱 { 幅: 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: 。青 { 背景色: 青; } <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. ボックスをクリックすると、円と四角形が切り替わります - インラインスタイルのバインディング 。箱 { 幅: 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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: CSS で点線の境界線のスクロール効果を実装するサンプルコード
>>: Dockerがコンテナサービスを停止または削除できない問題の解決策
Nginx ログの説明アクセス ログを通じて、ユーザーの地理的起源、ジャンプ元、使用端末、特定の U...
HTML にビデオを挿入するために最もよく使用される方法は 2 つあります。1 つは古い <o...
目次序文列挙可能なプロパティ反復可能なオブジェクトforEachメソッドとmapメソッドチェーン呼び...
1. 仮想マシンをダウンロードする公式ダウンロードウェブサイト: https://www.vmwar...
React Native は、2015 年 4 月に Facebook によってオープンソース化され...
これは、よく使われるけれども忘れられがちな CSS 実装方法のコレクションです。抜けや追加があれば、...
この記事では、ディープラーニングフレームワーク keras を使用して、SQL インジェクションの特...
私は全体のプロセスを 4 つのステップに分けます。 JDKをダウンロードしてインストールするTomc...
この記事では、参考までにMYSQLログとバックアップとリストアについて紹介します。具体的な内容は以下...
導入この記事は、 React + antdをベースにして、完全な全屏demoを紹介します。その理由は...
<br />Web テーブルの分割線を削除する方法。実際、上記の 3 つの表はいずれも ...
最近何もすることがないのでCSSをいじっていますより良いアニメーションライブラリTweenMaxを見...
関連する依存関係をインストールするnpm i lib-flexible --save npm i p...
目次1. データベース操作2. データ型3. バックアップとリカバリ3. 操作4. 上級5. 知識補...
これは、データベース サーバーが、接続が多すぎるのを避けるために、一定時間非アクティブな状態が続くと...