Home > Article > Web Front-end > About the mutation method of vue.js array

About the mutation method of vue.js array

不言Original: 2018-06-30 16:16:061203browse

This article shares with you the relevant content of the mutation method of vue.js array. Friends who are interested can follow it for reference.

Vue contains a set of mutation methods that observe arrays, so they will also trigger view updates. The methods are as follows:

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

What are the functions? I tried it out:

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

and got the following conclusion:

push() adds an element to the end of the array and returns the length of the current array successfully

pop() deletes the last element of the array and returns the value of the deleted element successfully

shift() deletes the first element of the array and returns the value of the deleted element successfully

unshift() adds an element to the front of the array and returns the length of the current array successfully

splice() has three parameters. The first is the subscript of the element you want to delete (required), the second is the number you want to delete (required), and the third is deletion
The value you want to replace at the original position (optional)

sort() sorts the array from small to large according to the character encoding by default, and successfully returns the sorted array

reverse() Reverse the array and successfully return the reversed array

Later I found out that these should be the original methods of javascript, right? I didn't learn JavaScript well before, so I took this opportunity to learn how to use these methods!

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

About change analysis of vue detection objects and arrays

VUEJS 2.0 child component access/call parent Component

About the implementation of .vue file parsing

The above is the detailed content of About the mutation method of vue.js array. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Analysis of changes in Vue detection objects and arraysNext article：Analysis of changes in Vue detection objects and arrays

See more

About the mutation method of vue.js array

Related articles