vue.jsの学習ノート：styleスタイルとclassリストのバインディング

データバインドの一般的なニーズは、要素のクラスリストとインラインスタイルの操作です。なぜなら、それらはすべて属性であるため、v-bindはそれらを処理します：表現の最終的な文字列を計算するだけで良いです。ただし、文字列の結合は面倒で誤りも多く発生します。したがって、v-bindを使用する場合、Vue.jsは特別に強化しています。表現の結果のデータ型は文字列の他にもオブジェクトや配列ができます。

一.クラス属性のバインド。

データバインド用のv-bind:コマンド、省略形で:

構文：<div v-bind:class="{ active: isActive }"></div>。classの後ろのダブルクォート内にオブジェクトリテラルを受け取ります/オブジェクト参照/配列としてパラメータ

ここでは、{active: isActive}はオブジェクトパラメータで、activeはクラス名、isActiveはボルン値です。以下は例です：

バインドオブジェクトリテラル

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インスタンスのdataに書ける、class="classObj "、ダブルクォート内のclassはVueインスタンスのclassObjオブジェクトの参照です。classObjはdataにまたはcomputedに置ける、computedに置く場合、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; 
};

効果、クリックしてclassを削除するとremoveClass関数が呼び出され、classArray配列の最後の要素を削除します。最初に、'red'を削除し、文字の色が赤から黒に変わります。もう一度クリックすると、'big'を削除し、フォントサイズが小さくなります。

二、内联styleのバインディング

今この瞬間、私はこのページの隣の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

以上は編集者が皆さんに紹介するvue.js学習ノートのstyleとclassのバインディングについてです。皆さんの助けになりますように。何かご不明な点があれば、コメントを残してください。編集者は迅速に回答します。このサイトへのサポートに感謝しています！

声明：本文の内容はインターネットから取得しており、著作権者に帰属します。インターネットユーザーが自発的に貢献し、自己でアップロードしたものであり、本サイトは所有権を持ちません。また、人工的に編集することもなく、関連する法的責任を負いません。著作権侵害を疑う内容があれば、お気軽にお問い合わせください。メール：notice#oldtoolbag.com（メールを送信する際には、#を@に変更してください。侵害を報告する際は、関連する証拠を提供してください。一旦確認が取れましたら、本サイトは即座に侵害を疑われる内容を削除します。）