Vueの練習2：01_02_ページピール

デモオンラインアドレス：

https://sx00xs.github.io/test/2/index.html

-------------------------------------------------- ---

IDE：vscode

ファイル形式：.vue

:(解決が完了するまでに）

< テンプレート> 
  < div要素のid = "アプリ" > 
    < divのクラス= "外側" > 
      < ulのクラス= "スキン" > 
        < 李V-用= "スキンで肌" ：キー= "skin.title" 
         ：クラス=」 [{電流：skin.isActive}、skin.cla]」
         ：タイトル= "skin.title" 
         @click = "handleChangeSkin（skin.cla）" 
        > 
          {{skin.value}} 
        </ 李> 
      </ UL > 
      <ULのクラス= "NAV" ：スタイル= "{背景：activeColor}" > 
        < 李V-ため= "（NAV、インデックス）のNAVで" ：キー= "NAV" ：クラス= "{最後：インデックス=== navs.length-1}" > 
          < HREF = "＃" > {{ナビゲーション}} </ A > </ 李> </ UL > </ DIV > </ DIV > </ テンプレート> < スクリプト> 
輸出デフォルト{ 
  データ：関数（）{
     リターン{ 
      activeColor。
        
      
    
  

' 緑' 、
      activeBackground：' ＃1 a3c5a8 ' 、       
      スキン：[ 
        { 
          CLA：' 赤' 、
          タイトル：' 红色' 、
          値：' 赤' 、
          のisActive：偽
        }、
        { 
          CLA：' 緑色' 、
          タイトル：' 绿色' 、
          値：「グリーン」、
          アクティブです： trueに
        }、
        { 
          ：CLA ' ブラック' 、
          タイトル：' 黒' 、
          値：' ブラック' 、
          のisActive：偽
        } 
      ]、
      たNAV：[ ' ニュース' 、' 娯楽' 、' スポーツ' 、' 映画' 、" 音楽' ' 旅行" ] 
    }
  }、
  メソッド：{
    handleChangeSkin（ヴァル）{ 
      スイッチ（ヴァル）{
         場合 、 " 赤" ：
         のための（VAR I = 0 ; I < 本.skins.length; iは++ ）{
           この.skins [I] .isActive = 偽。
        } 
        のための（VAR I = 0 ; I < 本.skins.length; iは++ ）{
           場合（これは、[I] .cla .skins === ヴァル）{
            これは、.skins [I] .isActive = 真。
          } 
        } 
        document.body.style.background = " #ffdddd " 。
        この.activeColor = ' 赤' ;
        破ります; 

        場合 " 緑" ：
         のための（VAR I = 0 ; I < 本.skins.length; iは++ ）{
           この.skins [I] .isActive = 偽。
        } 
        のために（VAR I = 0 ; I < 本.skins.length; iは++ ）{
           場合（この.skins [I] .cla === ヴァル）{
             この.skins [I] .isActive = 真。
          } 
        } 
        document.body.style.background = この.activeBackground。
        この.activeColor = 「グリーン」。
        破ります; 

        ケース 「黒」：
         用（VARI = 0 ; I < 本.skins.length; iは++ ）{
           この.skins [I] .isActive = 偽。
        } 
        ため（VAR I = 0 ; I < 本.skins.length; iは++ ）{
           場合（この.skins [I] .cla === ヴァル）{
             これは、[i]は.isActive .skins = 真。
          } 
        } 
        document.body.style.background = " #CCCCCC ";
        この.activeColor = 「ブラック」。
        破ります; 
      } 
    } 
  } 
} 
</ スクリプト>