Vue で動的なスタイルを実現するためのさまざまな方法のまとめ

<text :style="{color:state?'#ff9933':'#ff0000'}">こんにちは世界</te​​xt>
<スクリプト>
エクスポートデフォルト{
	データ（） {
		戻る {
			状態: 真
		}
	}
}
</スクリプト>

<テンプレート>
	<div class="wrapper" v-for="(item,index) in houseList" :key="index" @click="rightTap(index)">
		<div class="houseTitle" :class="{'active' : index === rightIndex}">
			{{item.name}}
		</div>
	</div>
</テンプレート>
<スクリプト>
エクスポートデフォルト{
	データ（） {
		戻る {
			右インデックス:0,
			ハウスリスト:[]
		};
	},
	方法:{
		右タップ(インデックス){ 
			this.rightIndex = インデックス
		}
	}
}
</スクリプト>
<style lang="scss" スコープ>
.ラッパー{
	幅: 118ピクセル;
	高さ: 60px;
	マージン: 6px 自動 0 自動;
	.houseタイトル{
		フォントサイズ: 22px;
		テキスト配置: 中央;
		空白: ラップなし;
		オーバーフロー: 非表示;
		テキストオーバーフロー: 省略記号;
	}
	。アクティブ{
		色:#2a7ff​​a;
		 背景色: ピンク;
	}
}
</スタイル>

  <div 
    :class="activeId === item.id?'activeStyle':'machineBar'" 
    v-for="(item,index) in List" :key="index" @click="clickEvent">    
      <p>{{アイテム名}}</p>    
  </div>

<テンプレート>
  <div v-for="(item,index) in houseList" :key="index">             
     <div :style="getStyle(item.status)">{{item.name}}</div>    
  </div> 
</テンプレート>
<スクリプト>
エクスポートデフォルト{ 
  データ（）{
    戻る {
	  ハウスリスト:[
        { 
          id:1,
          名前:1,
          ステータス:'a'
        },{
          id:2,
          名前:2,
          ステータス: 'b'
        },{
          id:3,
          名前:3,
          ステータス: 'c'
        }
      ]
    }
  },
  方法:{
    getStyle(e){        
      console.log('値',e)        
      e === 'a'の場合{            
        戻る {                
          幅:'60px',
          高さ:'60px',                
          背景: '黄色',                 
          マージン: '10px 自動'             
        }        
      }そうでない場合(e === 'b'){            
        戻る {                
          幅:'60px',
          高さ:'60px',                  
          背景: '赤'、                 
          マージン: '10px 自動'            
        }        
      }そうでない場合(e === 'c'){            
        戻る {                
          幅:'60px',
          高さ:'60px',                 
          背景: 'ピンク',                 
          マージン: '10px 自動'             
        }        
      }
    }
  }
}
</スクリプト>

<テンプレート>
  <div 
      class="homeWrap" :class="{'select': 選択 === 1,'click': クリック === 1}" 
      @click="handleClick(1)" @mousedown="menuOnSelect(1)">
     ホームページ   
</テンプレート>
<スクリプト>
エクスポートデフォルト{
  戻る {
      選択: 0,
      クリック数: 0
  }
  方法:{
    menuOnSelect(値){
      this.selected = 値;
    },
    ハンドルクリック(値){
      選択 = 0
      this.clicked = 値
    }
  }
 }
</スクリプト>
<style lang="stylus" スコープ>
  .homeWrap.select 
    背景赤
  .homeWrap.クリック 
    背景黄色
</スタイル>

<div :class="[isActive,isSort]"></div>
// 配列を三項演算子と組み合わせて必要なクラスを決定します
<div class="item" :class="[item.name? 'lg':'sm']"></div>
<div class="item" :class="[item.age<18? 'gray':'']"></div>
// <div :class="[{ active: isActive }, 'sort']"></div> と結合された配列オブジェクト

データ（） {
  戻る {
    isActive:'アクティブ'、
    isSort:'ソート'
 }
}
// css
。アクティブ{
    /*ここで設定する必要がある最初のスタイルを記述します*/
  } 
。選別{
    /*ここで設定する必要がある2番目のスタイルを記述します*/
  }

 <div :class="classObject"></div>
 
  エクスポートデフォルト{
    データ（）{
      戻る {
        アクティブ:true
      }
    },
    計算:{
      クラスオブジェクト() {
        戻る {
          class_a:this.isActive、
          class_b:!this.isActive
        // これは、独自のプロジェクトの状況に応じて変更して入力する必要があります}
      }
    }
  }
 
// css
.class_a{
    /*ここで設定する必要がある最初のスタイルを記述します*/
}
 
.class_b{
   /*ここで設定する必要がある2番目のスタイルを記述します*/
 }