Table des matières
2. Propriétés calculées par ordinateur
avant-propos
Nous savons que chaque application de projet Vue crée un nouveau projet Vue via le constructeur Vue. L'objet de configuration pour la création d'une instance de vue peut inclure les options d'attribut suivantes, telles que : données, méthodes, surveillance, modèle, etc. Chaque option a des fonctions différentes et vous pouvez choisir différentes configurations en fonction de vos propres besoins.
1. méthodes
La fonction appelée par l'événement général sera définie dans les attributs de la fonction méthodes. La fonction définie dans l'attribut méthodes peut également être appelée une méthode, qui est généralement utilisée comme fonction de rappel de l'événement. Ceci est appelé plusieurs fois et peut être exécuté plusieurs fois.
Nous pouvons mieux comprendre notre exemple grâce à l'exemple de code :
Exemple de code :
<!DOCTYPE html>
<html lang="en">
<head>
<title>methods</title>
</head>
<body>
<div id="app">
水果价格：<input type="text" v-model.munber="price" @keyup="sum()">元/斤</br>
数量：<input type="text" v-model="count" @change="sum()">斤</br>
总计：<input type="text" v-model="total" >元</br>
</div>
<script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
price:0,
count:1,
total:0,
},
methods:{
sum(){
this.total = this.price*this.count;
}
}
})
</script>
</body>
</html>résultat de l'opération :
Nous pouvons voir que lorsque la quantité et le prix changent, nous devons recalculer l'argent total. À ce stade, nous devons surveiller les changements de prix et de quantité, afin que le prix total puisse être calculé ; car les attributs sont déjà définis dans méthodes La méthode de calcul de sum et la formule de calcul de sum sont appelées lorsque les deux déclencheurs de congé change et keyup sont appelés. Les données seront modifiées, de sorte que le code exécute la méthode de calcul dans la somme.
2. Propriétés calculées par ordinateur
Pourquoi y a-t-il cette propriété calculée ? Parce que dans vue, afin de simplifier la logique, lorsqu'une valeur dépend trop des autres valeurs d'attribut, vue fournira des propriétés calculées pour l'utilisation du code. Cette propriété calculée est adaptée à l'exécution d'expressions complexes souvent longues et fastidieuses à réutiliser.
Vous pouvez écrire directement des propriétés calculées et appeler des propriétés calculées de la même manière que d'autres propriétés.
Exemple de code :
<!DOCTYPE html>
<html lang="en">
<head>
<title>methods</title>
</head>
<body>
<div id="app">
水果价格：<input type="text" v-model.munber="price" @keyup="sum()">元/斤</br>
数量：<input type="text" v-model="count" @change="sum()">斤</br>
总计：<input type="text" v-model="total" >元</br>
</div>
<script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
var app = new Vue({
el:'#app',
data:{
price:0,
count:1,
},
computed:{
total:function(){
return this.price*this.count
}
}
})
</script>
</body>
</html>résultat de l'opération :
Le résultat renvoyé par la fonction de la propriété calculée peut être directement affecté au nom de la propriété calculée. La propriété calculée ne peut être recalculée que lorsque les données dépendantes changent. Si les données dépendantes ne changent pas, le résultat du premier calcul sera mis en cache. .utilisé directement.
Trois, regarde
Watch peut être utilisé pour surveiller les modifications des propriétés de l'objet de données ou des propriétés calculées. Il est utilisé pour écouter les modifications des données. Lorsque les données changent, il peut traiter certaines transactions.
La valeur de watch est un objet, la propriété de l'objet est la propriété à surveiller, l'expression à observer, et sa valeur est la valeur d'un rappel, d'un nom de méthode ou d'un objet.
Exemple de code :
<!DOCTYPE html>
<html lang="en">
<head>
<title>methods</title>
</head>
<body>
<div id="app">
水果价格：<input type="text" v-model.munber="price" >元/斤</br>
数量：<input type="number " v-model="count" >斤</br>
总计：<input type="text" v-model="total" >元</br>
</div>
<script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
var app = new Vue({
el:'#app',
data:{
price:0,
count:1,
total:0,
},
watch:{
"price":function(newVal,oldVal){
return this.data=newVal*this.count;
},
"count":function(newVal,oldVal){
return this.total = this.price*newVal;
}
}
})
</script>
</body>
</html>résultat de l'opération :
Le processus d'écoute est le suivant : lors de l'appel de watch, chaque propriété de l'objet à l'intérieur, lorsque la valeur d'une propriété surveillée change, la fonction de rappel qui déclenche cette propriété sera exécutée.
Lorsque les totaux dépendent du prix et de la quantité, lorsque le prix et la quantité changent, les totaux changent également. Écoutez le prix et la quantité, et additionnez les changements. Différence entre les propriétés d'écoute et les propriétés calculées : les propriétés calculées enregistrent le résultat, mais pas l'écoute.
Quatre, filtre
Ce filtre s'appelle un filtre dans vue, qui peut filtrer les données avant de sortir les résultats, et peut être utilisé pour certains formatages de texte courants. Filtre : Une méthode pratique pour le traitement des données dans un modèle, adaptée pour définir des formats d'affichage tels que des chaînes, des nombres, des nombres, etc.
Syntaxe du filtre : vue.filter('nom du filtre', fonction (paramètre) {corps de la fonction}), le filtre n'est appelé que dans les expressions de différence et v-bind, et est ajouté à la fin de l'expression, à l'aide de "|" séparer. Code simple à expliquer :
Exemple de code :
<!DOCTYPE html>
<html lang="en">
<head>
<title>methods</title>
</head>
<body>
<div id="app">
<h1>{
{sum|f_int}}</h1>
<h1>{
{sum|f_int|f_$('$')}}</h1>
</div>
<script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
Vue.filter('f_int',function(msg){
return Math.round(msg);
})
Vue.filter('f_$',function(msg,arg1){
return arg1+msg;
})
var app = new Vue({
el:'#app',
data:{
sum:86
},
})
</script>
</body>
</html>résultat de l'opération :
