Vueがクラススタイルを設定します

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

< 頭> 
  < メタ文字コード= "UTF-8" > 
  < メタ名= "ビューポート" コンテンツ= "幅=装置幅、初期の規模= 1.0" > 
  < メタHTTP -equiv = "X-UA-互換性のある" コンテンツ= "IE =エッジ" > 
  < タイトル>ドキュメント</ タイトル> 
  < スクリプトSRC = "./ libに/ VUE-2.4.0.js" > <
  > 
    .red { 
      色：赤。
    } 

    .thin { 
      フォント重量：200 。
    } 

    .italic { 
      フォントスタイル：イタリック。
    } 

    .active { 
      文字間隔：0.5em 。
    } 
  </ スタイル> 
</ ヘッド> 

< 身体> 
  < div要素のid = "アプリ" > 
    <！ - 原生的クラス的写法- > 
    < h1のクラス=「レッドシン」>これは、あなたが想像できないほど大きな、大きな、大きなH1、です！！！</ のH1 > 

    <！ - 最初の使用は、直接転送アレイ注：ここで必要なクラスは、データバインディングV-バインドを作ることである- > 
    < H2 ：クラス=「[ 『シン』、 『斜体』 ] " >これは、あなたが想像できないほど大きな、大きな、大きなH2、です！！！</ H2 > 

    <！ - 二次利用、配列の三項演算子- > 
    < H3 ：クラス= "[？ 'シン'、 '斜体'、中のフラグ'アクティブ'： '']" >これは、あなたが想像できないほど大きな、大きな、大きなH3です！！！</ H3 > 

    <！ - 第三に、使用、コードの可読性を向上させるための代わりに式のトリプレットの配列内のオブジェクトの使用- > 
    < H4 ：これは、あなたが想像できないほど大きな、大きな、大きなH4です！！！</ H4 > 

    <！ - 第四に、使用、バインディングクラスオブジェクトへのV-バインドを使用すると、オブジェクトのプロパティは、クラス名が原因オブジェクトのプロパティに、ある引用符で囲むことができ、または引用符
      ので、ここでI私は引用符を書いていない、プロパティの値が識別子である- > 
    < H5 ：クラス=「classObj」>これは、あなたが想像できない大きな大きな大きなH5、です！！！</ H5 > 


  </ divの> 

  < スクリプト> 
    // 、Vueのインスタンスを作成しますのViewModel与える
    VAR VM =  新しい新しいVueのを（{ 
      EL：' #app ' 、
      データ：{ 
        フラグに：trueに、
        classObj：{赤：trueに、薄い：真、イタリック：真、アクティブ：真} 
      }、
      メソッド：{} 
    }）。
  </ スクリプト> 
</ ボディ> 

</ HTML >