vue.js バインディング スタイル スタイルとクラスのリスト
データ バインディングの一般的な要件は、要素のクラス リストとそのインライン スタイルを操作することです。これらはすべて属性であるため、v-bind を使用してそれらを処理できます。式の最後の文字列を評価するだけで済みます。ただし、文字列の連結は面倒でエラーが発生しやすくなります。したがって、Vue.js は、クラスおよびスタイルとともに使用される場合に特に v-bind を強化します。文字列に加えて、式の結果の型はオブジェクトまたは配列にすることもできます。
1. Class 属性をバインドします。
データをバインドするには v-bind: コマンドを使用します。これは次のように省略されます。
構文:
。クラスの後の二重引用符は、オブジェクト リテラル/オブジェクト参照/配列をパラメータとして受け入れます。ここで、{active: isActive} はオブジェクト パラメータ、active はクラス名、isActive はブール値です。以下に例を示します。
Bind object literal
html:
<div id="classBind"> <span :class="{warning:isWarning,safe:isSafe}" v-on:click="toggle"> 状态:{{alert}}{{isSafe}} </span> </div> //js var app11=new Vue({ el:'#classBind', data:{ isWarning:true, alertList:['红色警报','警报解除'], alert:'' }, computed:{ isSafe:function(){ return !this.isWarning; } }, methods:{ toggle:function(){ this.isWarning=!this.isWarning; this.alert= this.isWarning?this.alertList[0]:this.alertList[1]; } } });
css:
.warning{ color:#f24; } .safe{ color:#42b983; }
ステータステキストをクリックすると、次のテキストと色を切り替えることができます
/ / ステータス: アラートがクリアされました true
//ステータス: 赤色のアラート false
バインドされたオブジェクト参照
ここでバインドされたオブジェクトは Vue インスタンスのデータに書き込むことができ、class="classObj" では二重引用符で囲まれたクラスになりますis Vue インスタンスの classObj オブジェクトへの参照です。 classObj はデータに配置することも、計算済みに配置することもできます。classObj に対応する関数は、次のようにオブジェクトを返さなければなりません:
js:
var app11=new Vue({ el:'#classBind', data:{ isWarning:true, alertList:['红色警报','警报解除'], alert:'' }, computed: { isSafe: function () { return !this.isWarning; }, classObj:function(){ return { warning: this.isWarning, safe:this.isSafe } } }, methods:{ toggle:function(){ this.isWarning=!this.isWarning; this.alert= this.isWarning?this.alertList[0]:this.alertList[1]; } } });
html:
<div v-bind:class="classArray" @click="removeClass()">去掉class</div>
js
data: { classArray:["big",'red'] } methods:{ removeClass:function(){ this.classArray.pop(); } }
css:
.big{ font-size:2rem; } .red{ color:red; }
効果、クリックしてクラスを削除すると、removeClass 関数が呼び出され、classArray 配列の最後の項目が初めて削除されます。 「赤」が削除され、フォントの色が赤になります。赤が黒に変わり、もう一度クリックして「大」を削除すると、フォントサイズが小さくなります。
2. インラインスタイルをバインドする
現在、このページの隣にある Vue API ドキュメントを勉強して、ここで販売しています。o(^▽^)o
html
<div id="styleBind"> <span :style="{color:theColor,fontSize:theSize+'px'}" @click="bigger">styleBind</span> </div>
css
これにはCSSは必要ありません。 。 。
js
var app12=new Vue({ el:'#styleBind', data:{ theColor:'red', theSize:14 }, methods:{ bigger:function(){ this.theSize+=2; } } });
オブジェクトリテラルを渡すことに加えて、オブジェクト参照と配列を V-bind:style に渡すこともできます

ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック











vscode 自体は、定義にジャンプするための Vue ファイル コンポーネントをサポートしていますが、そのサポートは非常に弱いです。 vue-cli の構成では、多くの柔軟な使用法を記述することができるため、制作効率が向上します。しかし、これらの柔軟な記述方法により、vscode 自体が提供する関数がファイル定義へのジャンプをサポートできなくなります。これらの柔軟な記述方法に対応し、作業効率を向上させるために、Vue ファイルの定義へのジャンプをサポートする vscode プラグインを作成しました。

前書き: vue3 の開発では、reactive は応答性の高いデータを実装するメソッドを提供します。これは日常の開発で頻繁に使用される API です。この記事では、著者はその内部動作メカニズムを探ります。

Ace は、JavaScript で書かれた埋め込み可能なコード エディターです。 Sublime、Vim、TextMate などのネイティブ エディターの機能とパフォーマンスに匹敵します。あらゆる Web ページや JavaScript アプリケーションに簡単に埋め込むことができます。 Ace は Cloud9 IDE のメイン エディタとして維持されており、Mozilla Skywriter (Bespin) プロジェクトの後継です。

Vue.js は、今日のフロントエンド開発において非常に人気のあるフレームワークとなっています。 Vue.js が進化し続けるにつれて、単体テストの重要性がますます高まっています。今日は、Vue.js 3 で単体テストを作成する方法を検討し、いくつかのベスト プラクティスと一般的な問題と解決策を提供します。

コンポーネント化とモジュール化の違い: モジュール化はコード ロジックの観点から分割され、コードの階層化された開発が容易になり、各機能モジュールの機能の一貫性が保証されます。コンポーネント化は UI インターフェイスの観点から計画され、フロントエンドのコンポーネント化により UI コンポーネントの再利用が容易になります。

Vue フレームワークを使用してフロントエンド プロジェクトを開発する場合、デプロイ時に複数の環境をデプロイすることになりますが、開発環境、テスト環境、オンライン環境で呼び出されるインターフェイス ドメイン名が異なることがよくあります。どうすれば区別できるでしょうか?それは環境変数とパターンを使用することです。

Vue3 動的コンポーネントで例外を処理するにはどうすればよいですか?次の記事では、Vue3 の動的コンポーネントの例外処理方法について説明します。

Vue3 のリリース以来、単語合成 API は Vue を書く学生の視野に入ってきました。合成 API が以前のオプション API よりもどれほど優れているかは誰もが聞いたことがあると思います。そして、@ のリリースにより、 vue/composition-api プラグイン、Vue2 学生もバスに乗れます. 次に、主に Response ref と Reactive を使用して、このプラグインがどのようにこれを実現しているかを詳細に分析します。
