Comment utiliser les propriétés calculées dans vue-js tutoriel-php.cn

Comment utiliser les propriétés calculées dans vue

小云云

Libérer： 2017-12-12 13:07:12

original

2189 Les gens l'ont consulté

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:&#39;#box&#39;, 
    data:{ 
      a:1 
    }, 
    computed:{ 
      b:function () { 
        //业务代码 
        return this.a+1; 
      } 
    } 
  }); 
  /**这样直接改属性的值不行的，需要调用计算属性的set方法**/ 
  document.onclick = function(){ 
    vm.b = 3; 
  }; 
</script>

Copier après la connexion

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:&#39;#box&#39;, 
    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>

Copier après la connexion

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(&#39;#box&#39;);

Copier après la connexion

est équivalent à :

var vm2 = new Vue({ 
    el:&#39;#box&#39;, 
    data:{}, 
    methods:{} 
  });

Copier après la connexion

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:&#39;1&#39;,//自定义属性 
   show:function () { 
     alert(1); 
   }, 
   el:&#39;#box&#39;, 
   data:{}, 
   methods:{} 
 }); 
 vm2.$options.show(); 
 console.log(vm2.$options.aa);

Copier après la connexion

vm.$destroy -> Détruire l'objet

vm.$log(); l'état des données actuelles

Recommandations associées :

Explication détaillée des valeurs des boutons radio, des boutons à cocher et des listes déroulantes dans le formulaire Vue.js tags

Implémentation des composants divisés Vue.js Introduction à la méthode

Analyse détaillée de plusieurs postures dans la communication des composants Vue.js

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!