カラーシミュレーション上のVueのCSSメニューをクリック

<！DOCTYPE HTML > 
< HTML LANG = "ZH" >

< ヘッド> 
    < メタ文字コード= "UTF-8" > 
    < メタ名= "ビューポート" コンテンツ= "幅=装置幅、初期の規模= 1.0" > 
    < メタHTTP-当量= "X-UA-互換性のある" コンテンツ= "IE =縁" > 
    < スクリプトSRC = "./ node_modules / VUE / DIST / vue.js" タイプ= "テキスト/ javascriptの" 文字セット= "UTF-8" > </ スクリプト> 
    < スクリプトSRC =」./ node_modules /要素-UI / libに/ index.js」> </ スクリプト> 
    < リンクREL = "スタイルシート" のhref = "./ node_modules /要素-UI / LIB /テーマチョーク/ index.css" > 
    < タイトル> </ タイトル> 
    < スタイル> 
        .active { 
            色：赤。
            背景色：lightslategrey 。
        }

        サイト、
        李{ 
            パディング：0 。
            マージン：0 ; 
            リストスタイル：なし。
            行の高さ：40ピクセル; 
        } 
    </ スタイル> 
</ ヘッド>

< 本体> 
    < DIV ID = "アプリケーション" > 
        < UL > 
            < リチウムV-ための"映画で（項目、インデックス）" = ：クラス= "{活性：selectIndex ==インデックス}" @click = "liClick（インデックス） " >
                {{項目}}
            </ 李> 
        </ UL > 
    </ DIV > 
    < スクリプト> 
        CONST VM =  新しいヴュー（{
            エル：" #app " 、
            データ（）{
                リターン{
                    作品：[ " ミッドウェーの戦い" 、" 殺人" 、" Ipの男4 " 、" チャイナタウンホームズ3 " 、" ターミネーター：ダークデスティニー" ]、
                    selectIndex：0
                }
            }、
            方法：{
                liClick（インデックス）{
                    この.selectIndex = インデックス
                }
            }、
        }）
    </ スクリプト> 
</ ボディ>

</ HTML >