Vue.js
Proprietà calcolate
Ricerca…
Osservazioni
Dati vs Proprietà calcolate
La principale differenza del caso d'uso per i data
e le proprietà computed
di un'istanza Vue
dipende dallo stato potenziale o dalla probabilità di modifica dei dati. Al momento di decidere quale categoria dovrebbe essere un determinato oggetto, queste domande potrebbero aiutare:
- È un valore costante? ( dati )
- Ha la possibilità di cambiare? ( calcolato o dati )
- Il suo valore dipende dal valore di altri dati? ( calcolato )
- Ha bisogno di dati o calcoli aggiuntivi per essere completato prima di essere utilizzato? ( calcolato )
- Il valore cambierà solo in determinate circostanze? ( dati )
Esempio di base
Modello
<div id="example">
a={{ a }}, b={{ b }}
</div>
JavaScript
var vm = new Vue({
el: '#example',
data: {
a: 1
},
computed: {
// a computed getter
b: function () {
// `this` points to the vm instance
return this.a + 1
}
}
})
Risultato
a=1, b=2
Qui abbiamo dichiarato una proprietà calcolata b
. La funzione che abbiamo fornito verrà utilizzata come funzione getter per la proprietà vm.b
:
console.log(vm.b) // -> 2
vm.a = 2
console.log(vm.b) // -> 3
Il valore di vm.b
dipende sempre dal valore di vm.a
È possibile associare i dati alle proprietà calcolate nei modelli proprio come una proprietà normale. Vue è consapevole del fatto che vm.b
dipende da vm.a
, quindi aggiornerà tutti i binding che dipendono da vm.b
quando vm.a
cambia.
Proprietà calcolate vs orologio
modello
<div id="demo">{{fullName}}</div>
Guarda l'esempio
var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
}
})
vm.$watch('firstName', function (val) {
this.fullName = val + ' ' + this.lastName
})
vm.$watch('lastName', function (val) {
this.fullName = this.firstName + ' ' + val
})
Esempio calcolato
var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar'
},
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
}
}
})
Setter contornati
Le proprietà calcolate verranno automaticamente ricalcolate ogni volta che cambiano i dati da cui dipende il calcolo. Tuttavia, se è necessario modificare manualmente una proprietà calcolata, Vue ti consente di creare un metodo setter per farlo:
Modello (dall'esempio di base sopra):
<div id="example">
a={{ a }}, b={{ b }}
</div>
Javascript:
var vm = new Vue({
el: '#example',
data: {
a: 1
},
computed: {
b: {
// getter
get: function () {
return this.a + 1
},
// setter
set: function (newValue) {
this.a = newValue - 1
}
}
}
Ora puoi invocare il getter o il setter:
console.log(vm.b) // -> 2
vm.b = 4 // (setter)
console.log(vm.b) // -> 4
console.log(vm.a) // -> 3
vm.b = 4
invocherà il setter e imposta this.a su 3; per estensione, vm.b valuterà a 4.
Usare setter calcolati per v-model
Potrebbe essere necessario un v-model
su una proprietà calcolata. Normalmente, v-model non aggiornerà il valore della proprietà calcolata.
Il template:
<div id="demo">
<div class='inline-block card'>
<div :class='{onlineMarker: true, online: status, offline: !status}'></div>
<p class='user-state'>User is {{ (status) ? 'online' : 'offline' }}</p>
</div>
<div class='margin-5'>
<input type='checkbox' v-model='status'>Toggle status (This will show you as offline to others)
</div>
</div>
Messa in piega:
#demo {
font-family: Helvetica;
font-size: 12px;
}
.inline-block > * {
display: inline-block;
}
.card {
background: #ddd;
padding:2px 10px;
border-radius: 3px;
}
.onlineMarker {
width: 10px;
height: 10px;
border-radius: 50%;
transition: all 0.5s ease-out;
}
.online {
background-color: #3C3;
}
.offline {
background-color: #aaa;
}
.user-state {
text-transform: uppercase;
letter-spacing: 1px;
}
.margin-5 {
margin: 5px;
}
Il componente:
var demo = new Vue({
el: '#demo',
data: {
statusProxy: null
},
computed: {
status: {
get () {
return (this.statusProxy === null) ? true : this.statusProxy
}
}
}
})
Fiddle Qui vedresti , cliccando sul pulsante radio non ha alcun senso, il tuo stato è ancora online.
var demo = new Vue({
el: '#demo',
data: {
statusProxy: null
},
computed: {
status: {
get () {
return (this.statusProxy === null) ? true : this.statusProxy
},
set (val) {
this.statusProxy = val
}
}
}
})
violino E ora si può vedere la levetta avviene come la casella di controllo è selezionata / deselezionata.