Detaillierte Erläuterung der Verwendung und der Unterschiede von Compute, Filter, Get und Set in vue.js

Im Folgenden werde ich Ihnen eine detaillierte Erklärung der Verwendung und der Unterschiede von „Computed“, „Filter“, „Get“ und „Set“ in vue.js geben. Es hat einen guten Referenzwert und ich hoffe, dass es für alle hilfreich sein wird.

1. Die berechnete Methode von vue.js:

verarbeitet komplexe Logik, basierend auf Abhängigkeits-Caching, und wertet Abhängigkeiten neu aus ändern. . Der gleiche Effekt kann mit Methoden erzielt werden, aber Methoden werden beim erneuten Rendern erneut aufgerufen und ausgeführt. Methoden können verwendet werden, wenn kein Caching erforderlich ist.

Beispiel 1: Berechnet und Methoden implementieren Flipping-Strings

<template>
 <p>
 <input v-model="message">
 <p>原始字符串: {{ message }}</p>
 <p>计算后反转字符串: {{ reversedMessage }}</p>
 <p>使用方法后反转字符串: {{ reversedMessage2() }}</p>
 </p>
</template>

<script>
export default {
 data () {
 return {
 message: &#39;Runoob123!&#39;
 }
 },
 computed: {
 // 计算属性的 getter
 reversedMessage: function () {
 // `this` 指向 vm 实例
 return this.message.split(&#39;&#39;).reverse().join(&#39;&#39;)
 }
 },
 methods: {
 reversedMessage2: function () {
 return this.message.split(&#39;&#39;).reverse().join(&#39;&#39;)
 }
 }
}
</script>

Ausführungsergebnisse:

Beispiel 2: Berechnete Verwendung von get() und set()

<template>
 <p>
 	<select v-model="site">
 		<option value="Google http://www.google.com">Google http://www.google.com</option>
 		<option value="baidu http://www.baidu.co">baidu http://www.baidu.com</option>
 		<option value="网易 http://www.163.com">网易 http://www.163.com</option>
 	</select>
 	<p>name：{{name}}</p>
 	<p>url：{{url}}</p>
 </p>
</template>

<script>
export default {
 data () {
 return {
 name: &#39;Google&#39;,
 url: &#39;http://www.google.com&#39;
 }
 },
 computed: {
 site: {
 // getter
 get: function () {
 return this.name + &#39; &#39; + this.url
 },
 // setter
 set: function (newValue) {
 let names = newValue.split(&#39; &#39;)
 this.name = names[0]
 this.url = names[names.length - 1]
 }
 }
 }
}
</script>

Ausführungsergebnis:

2. Filtermethode von vue.js:

Ein Filter ist eine einfache Funktion, die die zurückgegebenen Daten verarbeitet und das Verarbeitungsergebnis zurückgibt. Allerdings wurde es in der vue2.0-Version entfernt. Die Alternative besteht darin, die Funktion in Methoden zu schreiben.

Instanz:

<template>
 <p>
 <input v-model="filterText"/>
 <ul>
 <li v-for="item in obj">
 <span>{{myfilter(item.label)}}</span>
 </li>
 </ul>
 </p>
</template>

<script>
export default {
 data () {
 return {
 obj: [
 {value: 0, label: &#39;beijing&#39;},
 {value: 1, label: &#39;shanghai&#39;},
 {value: 2, label: &#39;guangdong&#39;},
 {value: 3, label: &#39;zhejiang&#39;},
 {value: 4, label: &#39;jiangshu&#39;}
 ],
 filterText: &#39;&#39;
 }
 },
 methods: {
 myfilter (value) {
 if (value.indexOf(this.filterText) > -1) {
 return value
 }
 }
 }
}
</script>

Ausführungsergebnis:

3. Die Get- und Set-Methoden von vue.js:

Das Datenattribut in vue kann intern auf Datenänderungen reagieren ein Getter/Setter. In vue2.0 werden get() und set() in berechneten Eigenschaften verwendet, die in der berechneten Instanz oben behandelt wurden. Darüber hinaus wird vm.$set(object, key, value) von vue1.0 geerbt, um Datenelemente dynamisch zu überwachen. Nach der Erstellung der Instanz werden Array-Attribute hinzugefügt und Antworten können mit dieser Methode implementiert werden.

<template>
 <p>
 <input v-model="opt" @blur="add()"/>
 <ul>
 <li v-for="item in arr">
 {{ item }}
 </li>
 </ul>
 </p>
</template>

<script>
export default {
 data () {
 return {
 arr: [ &#39;北京&#39;, &#39;上海&#39;, &#39;广东&#39;, &#39;深圳&#39; ],
 opt: &#39;&#39;
 }
 },
 methods: {
 add () {
 this.$set(this.arr, this.arr.length, this.opt)
 }
 }
}
</script>

Ausführungsergebnisse:

Das Obige habe ich für alle zusammengestellt, ich hoffe, dass es so sein wird Seien Sie in Zukunft für alle hilfreich. Hilfreich.

Verwandte Artikel:

Detaillierte Erläuterung der vier Arten der Ereignisbindung in React

Verwendung von Vuex zum Erreichen der Anmeldung Status „Speichern“ und „Nicht angemeldet“-Status erlauben kein Durchsuchen. Welche spezifischen Methoden gibt es?

Lösen Sie das Problem, dass Browser niedrigerer Versionen den Import von es6 nicht unterstützen

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung und der Unterschiede von Compute, Filter, Get und Set in vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!