À propos de la méthode de mutation du tableau vue.js-js tutoriel-php.cn

À propos de la méthode de mutation du tableau vue.js

不言

Libérer： 2018-06-30 16:16:06

original

1307 Les gens l'ont consulté

Cet article partage avec vous le contenu pertinent de la méthode de mutation du tableau vue.js. Les amis intéressés peuvent le suivre pour référence.

Vue inclut un ensemble de méthodes de mutation qui observent les tableaux, elles déclencheront donc également des mises à jour des vues. Ces méthodes sont les suivantes :

push()
pop()
shift( )
unshift()
splice()
sort()
reverse()

? Je l'ai essayé :

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

Copier après la connexion

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

Copier après la connexion

J'ai obtenu la conclusion suivante :

push() ajoute un élément à la fin du tableau et renvoie la longueur du tableau actuel avec succès

pop() supprime le dernier élément du tableau et renvoie la valeur de l'élément supprimé avec succès

shift() supprime le premier élément du tableau et renvoie la valeur de l'élément supprimé avec succès

unshift() ajoute un élément au devant le tableau et renvoie avec succès la longueur du tableau actuel

splice() a trois paramètres Le premier est l'indice de l'élément que vous souhaitez supprimer (obligatoire), le second est le nombre. que vous souhaitez supprimer (obligatoire), et le troisième est la valeur que vous souhaitez remplacer à la position d'origine après la suppression
(facultatif)

sort() trie le tableau du plus petit au plus grand en fonction au codage de caractères par défaut et renvoie avec succès le tableau trié

reverse() inverse l'ordre du tableau et renvoie avec succès le tableau inversé

Plus tard, j'ai découvert que ceux-ci devraient être les méthodes originales de javascript, non ? Je n’avais pas bien appris JavaScript auparavant, j’en ai donc profité pour apprendre à utiliser ces méthodes !

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

À propos de l'analyse des modifications des objets et des tableaux de détection de vue

Accès/appel aux sous-composants VUEJS 2.0 Composant parent

À propos de la mise en œuvre de l'analyse des fichiers .vue

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!