Heim >Web-Frontend >js-Tutorial >So verwenden Sie berechnete Eigenschaften in Vue

So verwenden Sie berechnete Eigenschaften in Vue

亚连Original: 2018-06-22 17:24:101651Durchsuche

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>

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>

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

ist äquivalent zu:

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

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

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!

JavaScript vue.js 循环 JS 对象

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So verwenden Sie den Watcher in VueNächster Artikel：So verwenden Sie den Watcher in Vue

In Verbindung stehende Artikel

Mehr sehen