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

So verwenden Sie berechnete Eigenschaften in Vue

小云云

Freigeben： 2017-12-12 13:07:12

Original

2206 Leute haben es durchsucht

Berechnete Eigenschaften

Ausdrücke in Vorlagen sind sehr praktisch, werden aber eigentlich nur für einfache Operationen 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. In diesem Artikel werden hauptsächlich die Verwendung von Vue-berechneten Attributen und Methodenbeispielen für Vue-Instanzen vorgestellt. Jetzt werde ich es mit Ihnen teilen und Ihnen eine Referenz geben.

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 ,

Eine berechnete Eigenschaft ist eine Funktion mit einem Ergebnis. Sie verfügt über eine Get-Methode und eine Set-Methode. Die Get-Methode 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

Methoden zum Festlegen/Abrufen berechneter Eigenschaften:

<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 von vue-Instanz

vm ist der Name des erstellten Vue-Instanzobjekts

vm.$el -> 🎜>vm.$data -> sind Daten

vm.$mount -> Mounten Sie das Vue-Objekt auf dem Knotenobjekt

Zum Beispiel:

entspricht:

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

Nach dem Login kopieren

vm .$options -> Benutzerdefinierte Eigenschaften abrufen, benutzerdefinierte Methode

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

Nach dem Login kopieren

vue-Instanz kann Eigenschaften und Methoden anpassen. Zum Beispiel:

vm.$destroy -> Zerstöre das Objekt

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.$log( ->) der Status der aktuellen Daten

Verwandte Empfehlungen:

Detaillierte Erläuterung der Werte von Optionsfeldern, Kontrollkästchen und Dropdown-Listen im Vue.js-Formular Tags

Implementierung der geteilten Komponenten von Vue.js Methodeneinführung

Detaillierte Analyse mehrerer Haltungen in der Komponentenkommunikation von Vue.js

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!