[VUE]はバインディング・クラスとスタイル

公式リンク

クラスとスタイルのバインド- Vue.js
https://cn.vuejs.org/v2/guide/class-and-style.html

例としてノート

レンダリング

 

 

コード

<！DOCTYPE HTML > 
< HTML > 

< ヘッド> 
  < メタ文字コード= "UTF-8"  /> 
  < タイトル> </ タイトル> 
  < スクリプトSRC = "vue.js" > </ スクリプト> 
  < スタイル> 
    .red { 
      色：赤; 
    } 

    .fontBig { 
      フォントサイズ：大きいです。
    } 
  </ スタイル> 
</ ヘッド>

> 
  < 本部ID = "vueApp" > 
    < DIV ：クラス= "赤{} isRed" @click = "clickDiv1" > 
      クラス=「{1クラス名：真または偽、クラス2名：真のクラスバインディングオブジェクト表現を偽} " 
    </ DIV > 
    < DIV ：クラス=" [{赤：isRed}、fontClassName " @click =" clickDiv2 " > 
      クラスバインド配列文言：クラス=" [オブジェクト、クラス変数名]」
    </ DIV > 
    < DIV ：スタイル= "{たfontSize：fontSizeName、カラー：は、colorName}" @click = "clickDiv3" > 
      スタイルオブジェクトの表現を結合。スタイル= "JSオブジェクト" 
    </ DIV > 
    <DIV ：スタイル= "[baseStyleObj、colorStyleObj]" > 
      スタイルバインド配列の文言：スタイル= "[JSオブジェクト1、JSオブジェクト2]" 
    </ DIV > 
  </ DIV > 
</ ボディ> 
< スクリプト> 
  // 初期化VUEページ
  VAR VM =  新しい新しいヴュー（{ 
    EL：" #vueApp " 、
    データ：{ 
      isRed：falseに、
      fontClassName：" fontBig " 、
      は、colorName：" ブラック" 、
      fontSizeName："小" 
      baseStyleObj：{ 
        たfontSize：" 小" 
      }、
      colorStyleObj：{ 
        色：" 赤」、
      } 
    }、
    時計：{ 
      fontSizeName：関数（ヴァル）{
         この.baseStyleObj.fontSize = この.fontSizeName; 
      } 
      は、colorName：関数（ヴァル）{
         この.colorStyleObj.color = この.colorName; 
      } 
    }、  
 
    メソッド：{
      clickDiv1：関数（）{
         この.isRed =  ！この.isRed; 
      }、
      clickDiv2：関数（）{
         この.isRed =  ！この.isRed; 
      }、
      clickDiv3：関数（）{
         場合（この.colorName ===  " 黒" ）{
           この.colorName =  " 赤" 。
        } 他{
           この.colorName =  「黒」。
        } 

        であれば（この.fontSizeName ===  " 小" ）{
           この.fontSizeName =  " 大きいです" ; 
        } 他{
           この.fontSizeName =  " 小" ; 
        } 
      } 
    } 
  }）。
</ スクリプト> 

</ HTML >