Zusammenfassung verschiedener Methoden für Vue zum Erreichen dynamischer Stile

<text :style="{color:state?'#ff9933':'#ff0000'}">Hallo Welt </text>
<Skript>
Standard exportieren {
	Daten() {
		zurückkehren {
			Status: wahr
		}
	}
}
</Skript>

<Vorlage>
	<div class="wrapper" v-for="(item,index) in houseList" :key="index" @click="rightTap(index)">
		<div Klasse="Haustitel" :Klasse="{'aktiv' : index === rechterIndex}">
			{{item.name}}
		</div>
	</div>
</Vorlage>
<Skript>
Standard exportieren {
	Daten() {
		zurückkehren {
			rechterIndex:0,
			Hausliste:[]
		};
	},
	Methoden:{
		rechterTap(index){ 
			dies.rightIndex = index
		}
	}
}
</Skript>
<style lang="scss" scoped>
.Verpackung{
	Breite: 118px;
	Höhe: 60px;
	Rand: 6px auto 0 auto;
	.Haustitel{
		Schriftgröße: 22px;
		Textausrichtung: zentriert;
		Leerzeichen: Nowrap;
		Überlauf: versteckt;
		Textüberlauf: Auslassungspunkte;
	}
	.aktiv{
		Farbe: #2a7ffa;
		 Hintergrundfarbe: rosa;
	}
}
</Stil>

  <div 
    :Klasse="activeId === item.id?'activeStyle':'machineBar'" 
    v-for="(Element, Index) in Liste" :Schlüssel="Index" @click="KlickEreignis">    
      <p>{{item.name}}</p>    
  </div>

<Vorlage>
  <div v-for="(Artikel,Index) in Hausliste" :Schlüssel="Index">             
     <div :style="getStyle(item.status)">{{item.name}}</div>    
  </div> 
</Vorlage>
<Skript>
Standard exportieren { 
  Daten(){
    zurückkehren {
	  Hausliste:[
        { 
          Ich würde: 1,
          Name:1,
          Status: „a“
        },{
          Ich würde: 2,
          Name: 2,
          Status: „b“
        },{
          Ich würde: 3,
          Name: 3,
          Status: „c“
        }
      ]
    }
  },
  Methoden:{
    getStyle(e){        
      console.log('Wert',e)        
      wenn(e === 'a'){            
        zurückkehren {                
          Breite: '60px',
          Höhe: '60px',                
          Hintergrund: 'gelb',                 
          Rand: „10px automatisch“             
        }        
      }sonst wenn(e === 'b'){            
        zurückkehren {                
          Breite: '60px',
          Höhe: '60px',                  
          Hintergrund: 'rot',                 
          Rand: „10px automatisch“            
        }        
      }sonst wenn(e === 'c'){            
        zurückkehren {                
          Breite: '60px',
          Höhe: '60px',                 
          Hintergrund: „pink“,                 
          Rand: „10px automatisch“             
        }        
      }
    }
  }
}
</Skript>

<Vorlage>
  <div 
      Klasse = "homeWrap": Klasse = "{'select': ausgewählt === 1,'click': angeklickt === 1}" 
      @click="handleClick(1)" @mousedown="MenüBeiAuswahl(1)">
     Startseite   
</Vorlage>
<Skript>
Standard exportieren {
  zurückkehren {
      ausgewählt: 0,
      geklickt: 0
  }
  Methoden:{
    menuOnSelect(Wert){
      this.selected = Wert;
    },
    handleClick(Wert){
      Dies ausgewählt = 0
      this.clicked = Wert
    }
  }
 }
</Skript>
<style lang="Stylus" scoped>
  .homeWrap.Auswählen 
    Hintergrund rot
  .homeWrap.klick 
    Hintergrund gelb
</Stil>

<div :class="[istActive,istSort]"></div>
// Kombinieren Sie das Array mit dem ternären Operator, um die erforderliche Klasse zu bestimmen
<div Klasse="Artikel" :Klasse="[Artikel.name? 'lg':'sm']"></div>
<div Klasse="Artikel" :Klasse="[Artikel.Alter<18? 'gray':'']"></div>
// Array-Objekt kombiniert mit <div :class="[{ active: isActive }, 'sort']"></div>

Daten() {
  zurückkehren {
    isActive:'aktiv',
    isSort:'sortieren'
 }
}
// CSS
.aktiv{
    /*Schreiben Sie hier den ersten Stil, den Sie festlegen müssen*/
  } 
.Sortieren{
    /*Schreiben Sie hier den zweiten Stil, der festgelegt werden muss*/
  }

 <div :Klasse="Klassenobjekt"></div>
 
  Standard exportieren {
    Daten(){
      zurückkehren {
        istAktiv:true
      }
    },
    berechnet:{
      Klassenobjekt() {
        zurückkehren {
          Klasse_a:dies.istAktiv,
          class_b:!dies.istAktiv
        // Dies muss entsprechend der Situation Ihres eigenen Projekts geändert und ausgefüllt werden}
      }
    }
  }
 
// CSS
.Klasse_a{
    /*Schreiben Sie hier den ersten Stil, den Sie festlegen müssen*/
}
 
.klasse_b{
   /*Schreiben Sie hier den zweiten Stil, der festgelegt werden muss*/
 }