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： 2018-06-22 17:24:10

original

1691 Les gens l'ont consulté

Cet article présente principalement l'utilisation des propriétés calculées de vue et des exemples de méthodes d'instances de vue. L'éditeur pense que c'est plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur et jetons un coup d'œil.

Cet article présente l'utilisation des propriétés calculées de vue et des exemples de méthodes d'instances de vue. J'aimerais les partager avec vous. Les détails sont les suivants :

Propriétés calculées

Les expressions sont très pratiques dans les modèles, 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.

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 ,

La propriété calculée est une fonction avec des résultats. Elle a la méthode get et la 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

Le set/get. méthode de propriété calculée :

<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 d'instance de vue

vm est le nom de l'objet instance de vue créé

vm.$ el -> est l'élément

vm.$data -> est data

vm.$mount -> Montez l'objet vue sur l'objet nœud

Pour exemple :

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

Copier après la connexion

É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 avez besoin de l'appeler, vous avez besoin d'appeler $ options, par exemple :

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étruisez l'objet

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

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir.