Vueでクラススタイルを使用する方法の詳細

<スタイル>
        。アクティブ{
            色: 赤;
            フォントサイズ: 20px;
            フォントスタイル: 通常;
        }
    </スタイル>

<script src="js/vue.js"></script>
    <スクリプト>
        vm = new Vue({
            el:'#app',
            データ：{
                アクティブ:true
             }
       </スクリプト>

<div id="アプリ">
        <h1 :class="{active:isActive}">クラス スタイルを参照するためにブール値を使用しています</h1>
    </div>

データ：{
   アクティブ: false
}

<本文>
    
    <div id="アプリ">
        <ul>
            <li v-for="(item,index) リスト内">{
<!-- -->{インデックス}}----{
<!-- -->{アイテム名}}</li>
        </ul>
    </div>
    <script src="js/vue.js"></script>
    <スクリプト>
        vm = new Vue({
            el:"#アプリ",
            データ：{
                リスト：[
                    {id:1,name:"ジンクス"},
                    {id:2,name:"ジェイス"},
                    {id:3,name:"ケイトリン"},
                    {id:4,name:"蔚"},
                ]
            }
        })
    </スクリプト>

<li v-for="(item,index) リスト内" :class="{active: index%2 == 0}">
        {
<!-- -->{インデックス}}----{
<!-- -->{アイテム名}}
</li>

<li v-for="(item,index) リスト内" :class="{active: index === mark}">
        {
<!-- -->{インデックス}}----{
<!-- -->{アイテム名}}
</li>

vm = new Vue({
            el:"#アプリ",
            データ：{
                リスト：[
                    {id:1,name:"ジンクス"},
                    {id:2,name:"ジェイス"},
                    {id:3,name:"ケイトリン"},
                    {id:4,name:"蔚"},
                ]、
                マーク:0
            }
        })

<スタイル>
        .f50{
            フォントサイズ: 50px;
        }
        。青{
            色: 青;
        }
        。背景{
            背景色: 黒;
        }
    </スタイル>
<本文>
 
   <div id="アプリ">
         <p :class="classObject">中国語</p>
    </div>
</本文>

vm = new Vue({
            el:"#アプリ",
            データ：{
                クラスオブジェクト:{
                    "f50":true、
                    "青":true,
                    "背景":true
                }
            }
        })

vm = new Vue({
            el:"#アプリ",
            計算:{
         // 1. カスタム計算プロパティ名、
         // 2. 計算属性が行うことを関数myclass(){にカプセル化します。
                    戻る {
                        "f50":true、
                        "青":true,
                        "背景":true
                    }
                }
            }
        })

<p :class="myclass">中国語</p>

.f50{
            フォントサイズ: 50px;
        }
        。青{
            色: 青;
        }
        。背景{
            背景色: 黒;
        }

<!-- クラス名は引用符で囲む必要があることに注意してください-->
        <p :class="['f50','blue','background']">毎週</p>