ホームページ > 記事 > ウェブフロントエンド > vue.js 学習ノート バインディング スタイル スタイルとクラス リスト
データ バインディングの一般的な要件は、要素のクラス リストとそのインライン スタイルを操作することです。これらはどちらも属性であるため、v-bind を使用して処理できます。式の最後の文字列を評価するだけで済みます。ただし、文字列の連結は面倒でエラーが発生しやすくなります。したがって、Vue.js は、クラスおよびスタイルとともに使用される場合に特に v-bind を強化します。文字列に加えて、式の結果の型はオブジェクトまたは配列にすることもできます。
1. Class 属性をバインドします。
データをバインドするには v-bind: コマンドを使用します。これは次のように省略されます。
構文: e46ddcb875112b0f8e33ef725095c7c416b28748ea4df4d9c2150843fecfba68。クラスの後の二重引用符は、オブジェクト リテラル/オブジェクト参照/配列をパラメータとして受け入れます。
ここで、{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" の二重引用符で囲まれたクラスは、 Vue インスタンス 。 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]; } } });
Bound array
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 配列の最後の項目を削除します。初めて、'red' を削除します。フォントの色が赤から黒に変わり、クリックします。もう一度、「big」を削除すると、フォントサイズが小さくなります。
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にはオブジェクトリテラルを渡すだけでなく、オブジェクト参照や配列も渡すことができます
上記はエディタStyleで導入したvue.js学習ノートのバインディングです。ご質問がございましたら、メッセージを残してください。編集者がすぐに返信させていただきます。また、PHP 中国語 Web サイトをサポートしていただきありがとうございます。
vue.js の学習ノート、バインディング スタイル スタイル、およびクラス リスト関連記事の詳細については、PHP 中国語 Web サイトに注目してください。