Appunti di studio su vue.js: vincoli di stile e elenchi di classi

Un'istanza comune di binding dei dati è quella di operare sulla lista delle classi dell'elemento e sui suoi stili in linea. Poiché sono entrambi attribute, possiamo gestirli con v-bind: è sufficiente calcolare la stringa finale dell'espressione. Tuttavia, la concatenazione di stringhe è complicata e soggetta a errori. Pertanto, quando v-bind viene utilizzato per classi e stili, Vue.js lo ha migliorato specificamente. Oltre alla stringa, il tipo del risultato dell'espressione può essere anche un oggetto o una lista.

1. Binding delle proprietà Class.

Il binding dei dati si effettua con il comando v-bind, abbreviato in:

Sintassi: <div v-bind:class="{ attivo: isActive }"></div>. All'interno delle virgolette doppi della classe viene accettato un oggetto letterale/una riferimento oggetto/una lista come parametro,

Qui, {attivo: isActive} è un parametro oggetto, attivo è il nome della classe, isActive è un valore booleano. Ecco un esempio:

oggetto letterale di binding

html：

<div id="classBind">
<span :class="{avviso:isWarning,sicuro:isSafe}" v-on:click="toggle">
Stato:{{alert}}{{isSafe}}
</span>
</div>
//js
var app11=new Vue({
el:'#classBind',
data:{
isWarning:true,
alertList:['Allarme rosso','Allarme annullato'],
alert:''
},
computed:{
isSafe:function(){
return !this.isWarning;
}
},
methods:{
toggle:function(){
this.isWarning=!this.isWarning;
this.alert= this.isWarning?this.alertList[0]:this.alertList[1];
}
}
});

css:

.warning{
color:#f24;
}
.safe{
color:#42b983;
}

Quando si clicca sul testo di stato, è possibile commutare il testo e il colore dietro di esso

//Stato: Allarme annullato true

//Stato: Allarme rosso false

Riferimento all'oggetto legato

L'oggetto legato può essere scritto nella sezione data dell'istanza Vue, mentre in class="classObj " i virgoletti sono un riferimento all'oggetto classObj dell'istanza Vue. classObj può essere messo in data o computed, se in computed, la funzione corrispondente a classObj deve restituire un oggetto come segue:

js:

var app11=new Vue({
el:'#classBind',
data:{
isWarning:true,
alertList:['Allarme rosso','Allarme annullato'],
alert:''
},
computed: {
isSafe: function () {
return !this.isWarning;
},
classObj:function(){
return {
warning: this.isWarning,
safe:this.isSafe
}
}
},
methods:{
toggle:function(){
this.isWarning=!this.isWarning;
this.alert= this.isWarning?this.alertList[0]:this.alertList[1];
}
}
});

Legame dell'array

html:

<div v-bind:class="classArray" @click="removeClass()">Rimuovi classe</div>

js

data: {
classArray:["big",'red']
}
methods:{
removeClass:function(){
　　this.classArray.pop();
}
}

css:

.big{
font-size:2rem;
}
.red{
color:red; 
}

L'effetto, cliccando rimuove la classe, viene chiamata la funzione removeClass, rimuovendo l'ultimo elemento dell'array classArray, la prima volta, rimuove 'red', il colore del testo diventa nero, poi clicca di nuovo, rimuove 'big', il testo diventa più piccolo.

Due: bind style inline

In questo momento, sto guardando il documento API di Vue su questa pagina accanto e sto vendendo qui, la sensazione di fare un po' di finta è veramente piacevole o(^▽^)o

html

<div id="styleBind">
<span :style="{color:theColor,fontSize:theSize+'px'}" @click="bigger">styleBind</span>
</div>

css

Questo non richiede css...

js

var app12=new Vue({
el:'#styleBind',
data:{
theColor:'red',
theSize:14
},
methods:{
bigger:function(){
this.theSize+=2;
}
}
});

Oltre a passare oggetti literal, è possibile passare anche riferimenti di oggetti e array a V-bind:style

Come sopra menzionato, questo è un appunto di apprendimento di vue.js che l'editor ha introdotto su come bind style e class, speriamo che sia utile a tutti. Se avete qualsiasi domanda, lasciate un commento e l'editor risponderà prontamente. In questo senso, l'editor desidera ringraziare tutti per il supporto al sito web di Yell Call Tutorial!

Dichiarazione: il contenuto di questo articolo è stato tratto da Internet, il copyright spetta ai rispettivi autori, il contenuto è stato contribuito e caricato autonomamente dagli utenti di Internet, questo sito non detiene i diritti di proprietà, non è stato editato manualmente e non assume alcuna responsabilità legale. Se trovi contenuti sospetti di violazione del copyright, ti preghiamo di inviare una e-mail a: notice#oldtoolbag.com (al momento dell'invio dell'e-mail, sostituisci # con @) per segnalare, fornendo prove pertinenti. Una volta verificata, questo sito eliminerà immediatamente il contenuto sospetto di violazione del copyright.