Heim > Artikel > Web-Frontend > Über die Mutationsmethode des vue.js-Arrays

Über die Mutationsmethode des vue.js-Arrays

不言Original: 2018-06-30 16:16:061275Durchsuche

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()
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: &#39;#app&#39;,
   data: {
    items: [],
    text: &#39;&#39;,
    result: &#39;&#39;
   },
   methods: {
    methodByPush: function () {
     this.result = this.items.push(this.text)
     this.text = &#39;&#39;
    },
    methodByPop: function () {
     this.result = &#39;&#39;
     this.result = this.items.pop()
    },
    methodByShift: function () {
     this.result = &#39;&#39;
     this.result = this.items.shift()
    },
    methodByUnshift: function () {
     this.result = &#39;&#39;
     this.result = this.items.unshift(this.text)
     this.text = &#39;&#39;
    },
    methodBySplice: function () {
     this.result = &#39;&#39;
     this.result = this.items.splice(2,1,&#39;yovan&#39;)
    },
    methodBySort: function () {
     this.result = &#39;&#39;
     this.result = this.items.sort()
    },
    methodByReverse: function () {
     this.result = &#39;&#39;
     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!

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：Analyse von Änderungen in Vue-Erkennungsobjekten und -ArraysNächster Artikel：Analyse von Änderungen in Vue-Erkennungsobjekten und -Arrays

In Verbindung stehende Artikel

Mehr sehen