So verwenden Sie berechnete Eigenschaften in Vue-js-Tutorial-php.cn

So verwenden Sie berechnete Eigenschaften in Vue

亚连

Freigeben： 2018-06-22 17:24:10

Original

1621 Leute haben es durchsucht

In diesem Artikel werden hauptsächlich die Verwendung der von Vue berechneten Eigenschaften und Beispiele für Methoden von Vue-Instanzen vorgestellt. Der Herausgeber findet ihn recht gut, daher werde ich ihn jetzt mit Ihnen teilen und als Referenz verwenden. Lassen Sie uns dem Editor folgen und einen Blick darauf werfen.

Dieser Artikel stellt die Verwendung von Vue-berechneten Eigenschaften und Beispiele für Methoden von Vue-Instanzen vor. Die Details sind wie folgt:

Berechnete Eigenschaften

Ausdrücke sind in Vorlagen sehr praktisch, werden aber eigentlich nur für einfache Vorgänge verwendet. Zur Beschreibung der Struktur von Ansichten werden Vorlagen verwendet. Wenn einer Vorlage zu viel Logik hinzugefügt wird, kann sie übergewichtig und schwer zu warten sein. Aus diesem Grund beschränkt Vue.js die Bindung von Ausdrücken auf einen Ausdruck. Wenn die Logik von mehr als einem Ausdruck erforderlich ist, sollten berechnete Eigenschaften verwendet werden.

von Vue berechnete Eigenschaften

Wenn wir den Wert einer Eigenschaft basierend auf dem Ausführungsergebnis eines Endes des Geschäftscodes zurückgeben möchten, können wir die berechnete Eigenschaft verwenden ,

Berechnete Eigenschaft ist eine Funktion mit Ergebnissen. Sie hat eine get-Methode und eine set-Methode. Die get-Methode muss einen Rückgabewert haben und muss einen Rückgabewert haben.

<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>

Nach dem Login kopieren

Die set/get-Methode von berechnete Eigenschaft:

<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>

Nach dem Login kopieren

Einfache Methode der Vue-Instanz

vm ist der Name des erstellten Vue-Instanzobjekts

vm.$el -> ist das Element

vm. $data -> ist data

vue-Objekt auf dem Knotenobjekt

Zum Beispiel:

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

Nach dem Login kopieren

ist äquivalent zu:

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

Nach dem Login kopieren

vm.$options -> Benutzerdefinierte Eigenschaften und benutzerdefinierte Methoden abrufen

Vue-Instanzen können Eigenschaften und Methoden anpassen, wenn Sie sie aufrufen müssen. Sie müssen $options aufrufen:

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);

Nach dem Login kopieren

vm.$destroy -> Zerstöre das Objekt

vm.$log();

Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

So verwenden Sie die Swiper-Komponente, um die Anzeige von Bildern in WeChat-Miniprogrammen umzuschalten

So implementieren Sie Rundschreiben-Werbung in Javascript-Artikel

Über das Debugging-Tool vue-devtools (ausführliches Tutorial) in Vue

Das obige ist der detaillierte Inhalt vonSo verwenden Sie berechnete Eigenschaften in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!