Maison > Article > interface Web > À propos de la méthode de mutation du tableau vue.js
À propos de la méthode de mutation du tableau vue.js
- 不言original
- 2018-06-30 16:16:061203parcourir
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()
Quelles sont les fonctions de 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>
<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>
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!