ヴュー - V-バインドダイナミックバインディングクラス

今では多くのウェブサイトでは、CSSスタイルを置き換え、ダイナミックスイッチング希望クラスです。ここでは、V-バインドVueのバインディングクラスを使用します

バインディングオブジェクト構文（共通）

真の赤サイズの値は、赤とサイズクラスに表示され、falseが表示されません。ここで記述するための2つの方法があります。

< スタイル> 
    .red { 
        色：赤。
    } 
    .size { 
        フォントサイズ：20ピクセル。
    } 
</ スタイル>

< 本部ID = "アプリケーション" > 
    < UL > 
        <！ - 執筆- > 
        < 李：クラス= "{赤：isColor、サイズ：isSize}" > {リスト} {} </ 李> 
        <！ - 2を書いて、V-バインド機能は（バインドに追加する必要があります）- > 
        < 李：クラス= "listDataプロパティ（）" > {リスト} {} </ 李> 
    </ UL > 
    <！ - をクリックし、赤真が偽となり、falseが逆に真になる赤> - 
    < ボタン@click =「リバース」>逆</ ボタン> 
</DIV >

< スクリプト> 
    constのアプリ= 新しいヴュー（{
        エル：" #app " 、
        データ：{
            リスト：" Vueの" 、
            isColor：真、
            isSize：真
        }、
        方法：{
            リバース：関数（）{
                 返す この.isColorを=  ！この.isColor;
            }、
            // 写法二
            たlistData：関数（）{
                 リターン{赤：この.isColor、サイズ：この.isSize}。
            }
        }
    }）
</ スクリプト>

注：V-バインド：classコマンドは、従来のクラス特性と共存でき、糖衣構文に対応する：クラス：「クラスが」V-結合に等しいです

結合配列構文

配列の構文は、それが柔軟ではない主な理由は、一般的に使用されていません。

< DIV ID = "アプリケーション" > 
    < UL > 
        <！ - 这里绑定データ的变量- > 
        < 李：クラス= "[ACLI、のBclI]" > {{リスト}} </ 李> 
    </ UL > 
</ DIV >

CONSTアプリ=新しいビュー（{
        エル： "＃アプリ"、
        データ：{
            リスト： "Vueの"、
            ACLI： "AAA"、
            BclI： "BBB"、
        }、
}）    

その他の文字列を結合する配列構文をバインドほとんど、一般的に使用されていません

< DIV ID = "デモ" > 
　　< スパン：クラス= "クラスA" > </ スパン> 
</ DIV >

VM =新しいヴュー（{ましょう
　　　　エル： "＃デモ"、
　　　　データ：{
　　　　　　クラスA：「文字列」
　　　　}
}）

総合的な言葉遣い

< DIV ID = "デモ" > 
　　< スパン：クラス= "[1、{ 'クラスA'：A級、 'ClassBの'：ClassBの}]" > </ スパン> 
</ DIV >

そこVM =新しいヴュー（{
　　　　エル： "＃デモ"、
　　　　データ：{
　　　　　　1：「文字列」、
　　　　　　ClassA：真、
　　　　　　ClassBの：偽
　　　　}
}）