Maison > Article > interface Web > Comment utiliser les propriétés calculées dans vue
Comment utiliser les propriétés calculées dans vue
- 小云云original
- 2017-12-12 13:07:122134parcourir
Propriétés calculées
Les expressions dans les modèles sont très pratiques, mais elles ne sont en réalité utilisées que pour des opérations simples. Les modèles sont utilisés pour décrire la structure des vues. Mettre trop de logique dans un modèle peut le rendre trop lourd et difficile à maintenir. C'est pourquoi Vue.js limite les expressions de liaison à une seule expression. Si la logique de plusieurs expressions est requise, les propriétés calculées doivent être utilisées. Cet article présente principalement l'utilisation des attributs calculés de vue et des exemples de méthodes d'instances de vue. L'éditeur pense que c'est plutôt bon. Maintenant, je vais le partager avec vous et vous donner une référence, j'espère que cela pourra aider tout le monde.
vue propriétés calculées
Lorsque nous voulons renvoyer la valeur d'une propriété en fonction du résultat de l'exécution d'une extrémité du code métier, nous pouvons utiliser la propriété calculée ,
Une propriété calculée est une fonction avec un résultat. Elle a une méthode get et une méthode set La méthode get doit avoir une valeur de retour et doit avoir une valeur de retour
.
<script src="lib/vue.js"></script>
<body>
<p id="box">
a = >{{a}}
b = > {{b}}
</p>
</body>
<script>
var vm = new Vue({
el:'#box',
data:{
a:1
},
computed:{
b:function () {
//业务代码
return this.a+1;
}
}
});
/**这样直接改属性的值不行的，需要调用计算属性的set方法**/
document.onclick = function(){
vm.b = 3;
};
</script> Définir/obtenir des méthodes de propriétés calculées :
<script src="lib/vue.js"></script>
<body>
<p id="box">
a = >{{a}}
b = > {{b}}
</p>
</body>
<script>
var vm = new Vue({
el:'#box',
data:{
a:1
},
computed:{
b:{
get:function () {
return this.a+1;
},
set:function(val){
this.a = val;
}
}
}
});
/**这样直接改属性的值不行的，需要调用计算属性的set方法**/
document.onclick = function(){
vm.b = 3;
//默认调用计算属性的set方法
};
</script>
Méthode simple de vue instance
vm est le nom de l'objet instance vue créé
vm.$el -> est l'élément
vm.$data -> is data
vm.$mount -> Montez l'objet vue sur l'objet nœud
Par exemple :
var vm2 = new Vue({
data:{},
methods:{}
}).$mount('#box');
est équivalent à :
var vm2 = new Vue({
el:'#box',
data:{},
methods:{}
});
vm .$options -> Obtenez des propriétés personnalisées, des méthodes personnalisées
Les instances Vue peuvent personnaliser les propriétés et les méthodes Si vous devez les appeler, vous devez appeler $options. 🎜>
var vm2 = new Vue({
aa:'1',//自定义属性
show:function () {
alert(1);
},
el:'#box',
data:{},
methods:{}
});
vm2.$options.show();
console.log(vm2.$options.aa);vm.$destroy -> Détruire l'objet
vm.$log(); l'état des données actuelles
Recommandations associées :
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!