Details zur Verwendung von Klassenstilen in Vue

<Stil>
        .aktiv{
            Farbe: rot;
            Schriftgröße: 20px;
            Schriftstil: normal;
        }
    </Stil>

<script src="js/vue.js"></script>
    <Skript>
        lass vm = neues Vue({
            el:'#app',
            Daten:{
                istAktiv:true
             }
       </Skript>

<div id="app">
        <h1:class="{active:isActive}">Ich verwende einen booleschen Wert, um auf den Klassenstil zu verweisen</h1>
    </div>

Daten:{
   isActive: false
}

<Text>
    
    <div id="app">
        <ul>
            <li v-for="(Element, Index) in Liste">{
<!-- -->{index}}----{
<!-- -->{item.name}}</li>
        </ul>
    </div>
    <script src="js/vue.js"></script>
    <Skript>
        lass vm = neues Vue({
            el:"#app",
            Daten:{
                Liste:[
                    {id:1,name:"Jinx"},
                    {id:2,name:"Jace"},
                    {id:3,name:"Caitlin"},
                    {id:4,name:"W"},
                ]
            }
        })
    </Skript>

<li v-for="(Element, Index) in Liste" :Klasse="{aktiv: Index%2 == 0}">
        {
<!-- -->{index}}----{
<!-- -->{item.name}}
</li>

<li v-for="(Element, Index) in Liste" :Klasse="{aktiv: Index === Markierung}">
        {
<!-- -->{index}}----{
<!-- -->{item.name}}
</li>

lass vm = neues Vue({
            el:"#app",
            Daten:{
                Liste:[
                    {id:1,name:"Jinx"},
                    {id:2,name:"Jace"},
                    {id:3,name:"Caitlin"},
                    {id:4,name:"W"},
                ],
                Markierung: 0
            }
        })

<Stil>
        .f50{
            Schriftgröße: 50px;
        }
        .Blau{
            Farbe: blau;
        }
        .Hintergrund{
            Hintergrundfarbe: schwarz;
        }
    </Stil>
<Text>
 
   <div id="app">
         <p :class="classObject">Chinesisch</p>
    </div>
</body>

lass vm = neues Vue({
            el:"#app",
            Daten:{
                Klassenobjekt: {
                    "f50":wahr,
                    "blau":wahr,
                    "Hintergrund":true
                }
            }
        })

lass vm = neues Vue({
            el:"#app",
            berechnet:{
         // 1. Benutzerdefinierter berechneter Eigenschaftsname,
         // 2. Was das berechnete Attribut macht, kapseln wir in die Funktion myclass(){
                    zurückkehren {
                        "f50":wahr,
                        "blau":wahr,
                        "Hintergrund":true
                    }
                }
            }
        })

<p :class="myclass">Chinesisch</p>

.f50{
            Schriftgröße: 50px;
        }
        .Blau{
            Farbe: blau;
        }
        .Hintergrund{
            Hintergrundfarbe: schwarz;
        }

<!-- Beachten Sie, dass der Klassenname in Anführungszeichen stehen muss-->
        <p :class="['f50','blue','background']">Woche für Woche</p>