Heim > Artikel > Web-Frontend > Über die Mutationsmethode des vue.js-Arrays
Über die Mutationsmethode des vue.js-Arrays
- 不言Original
- 2018-06-30 16:16:061203Durchsuche
Dieser Artikel teilt Ihnen den relevanten Inhalt der Mutationsmethode des vue.js-Arrays mit. Interessierte Freunde können ihm als Referenz folgen.
Vue enthält eine Reihe von Mutationsmethoden, die Arrays beobachten, sodass sie auch Ansichtsaktualisierungen auslösen. Diese Methoden sind wie folgt:
push()
pop()
shift( )
unshift()
splice()
sort()
Welche Funktionen hat reverse()
? Ich habe es ausprobiert:
<body>
<p id="app">
<p>
push方法：
<input type="text" v-model="text" @keyup.enter="methodByPush">
<input type="button" value="测试功能" @click="methodByPush">
<ul>
<li v-for="item of items">
<span v-text="item"></span>
</li>
</ul>
</p>
<p>
pop方法：
<input type="button" value="测试功能" @click="methodByPop">
<ul>
<li v-for="item of items">
<span v-text="item"></span>
</li>
</ul>
</p>
<p>
shift方法：
<input type="button" value="测试功能" @click="methodByShift">
<ul>
<li v-for="item of items">
<span v-text="item"></span>
</li>
</ul>
</p>
<p>
unshift方法：
<input type="text" v-model="text" @keyup.enter="methodByUnshift">
<input type="button" value="测试功能" @click="methodByUnshift">
<ul>
<li v-for="item of items">
<span v-text="item"></span>
</li>
</ul>
</p>
<p>
splice方法：
<input type="button" value="测试功能" @click="methodBySplice">
<ul>
<li v-for="item of items">
<span v-text="item"></span>
</li>
</ul>
</p>
<p>
sort方法：
<input type="button" value="测试功能" @click="methodBySort">
<ul>
<li v-for="item of items">
<span v-text="item"></span>
</li>
</ul>
</p>
<p>
reverse方法：
<input type="button" value="测试功能" @click="methodByReverse">
<ul>
<li v-for="item of items">
<span v-text="item"></span>
</li>
</ul>
</p>
result显示的地方：<br>
<span v-text="result"></span>
</p>
<script>
var vm = new Vue({
el: '#app',
data: {
items: [],
text: '',
result: ''
},
methods: {
methodByPush: function () {
this.result = this.items.push(this.text)
this.text = ''
},
methodByPop: function () {
this.result = ''
this.result = this.items.pop()
},
methodByShift: function () {
this.result = ''
this.result = this.items.shift()
},
methodByUnshift: function () {
this.result = ''
this.result = this.items.unshift(this.text)
this.text = ''
},
methodBySplice: function () {
this.result = ''
this.result = this.items.splice(2,1,'yovan')
},
methodBySort: function () {
this.result = ''
this.result = this.items.sort()
},
methodByReverse: function () {
this.result = ''
this.result = this.items.reverse()
alert(this.result)
}
}
})
</script>
Ich bin zu folgendem Ergebnis gekommen:
push() fügt ein Element am Ende des Arrays hinzu und gibt erfolgreich die Länge des aktuellen Arrays zurück
pop() löscht das letzte Element des Arrays und gibt den Wert des gelöschten Elements zurück erfolgreich
shift() löscht das erste Element des Arrays und gibt erfolgreich den Wert des gelöschten Elements zurück
unshift() fügt ein Element am Anfang des Arrays hinzu und gibt erfolgreich die Länge des aktuellen Arrays zurück
splice() hat drei Parameter. Der erste ist der Index des Elements, das Sie löschen möchten (erforderlich), der zweite ist die Nummer, die Sie löschen möchten (erforderlich), und der dritte ist das Löschen
Der Wert, den Sie an der ursprünglichen Position ersetzen möchten (optional)
sort() sortiert das Array von klein nach groß entsprechend der Zeichenkodierung nach Standard und gibt das sortierte Array erfolgreich zurück
reverse() kehrt die Reihenfolge des Arrays um und gibt das umgekehrte Array erfolgreich zurück
Später fand ich heraus, dass dies die ursprünglichen Methoden von sein sollten Javascript, oder? Da ich JavaScript noch nicht so gut gelernt habe, nutzte ich diese Gelegenheit, um den Umgang mit diesen Methoden zu erlernen!
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.
Verwandte Empfehlungen:
Informationen zur Änderungsanalyse von Vue-Erkennungsobjekten und -Arrays
VUEJS 2.0-Unterkomponentenzugriff/-aufruf übergeordnete Komponente
Über die Implementierung der .vue-Dateianalyse
Das obige ist der detaillierte Inhalt vonÜber die Mutationsmethode des vue.js-Arrays. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!