Vue はスタイル スタイルを動的にバインドし、複数の方法でスタイル スタイルを動的に追加します

プロジェクトではスタイル インライン スタイルを動的に追加する必要があり、一般的に使用されるメソッドをいくつか示します。

知らせ：

1. - を含むすべてのスタイル属性名をキャメルケースに変更する必要があります。たとえば、font-size を次のように変更する必要があります。fontSize。

fontSize:'14px'2. バインディング値に加えて、他の属性名の値もnot :14pxのように引用符で囲む必要がありますfontSize。

オブジェクト形式

//html
<div :style="{ color: '#333', fontSize: '14px' }"></div>

配列形式

//html
<div :style="[baseStyles, overridingStyles]"></div>

data(){
  return {
	baseStyles: {
	  width: '100px',
	  height: '100px'
	},
	overridingStyles: {
	  background: 'red',
	  height: '200px'
	}
  }
}

三項演算子の形式

//html
<div :style="{background:index===0 ? '#FFFFFF' : '#000000'}"></div>

<div :style="[{color:index==0 ?'#333':'#000'},{fontSize:'14px'}]"></div>

計算されたプロパティのバインド

//html
<div :style="setIconStyle"></div>

computed：{
//动态设置样式
etIconStyle() {
 return 'color: #333; fontSize: 14px'
 }
}

条件によってスタイルをバインドする

//html
<div :style="setIconStyle(index)"></div>

computed：{
//动态设置样式
etIconStyle() {
 return function (index) {
	return index===0 ? 'color: #333' : 'color: #000'
  }
 }
}

複数の値 (ブラウザは実行中のサポートに基づいて選択します)

//html
<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>