浅析vue.js数组的变异方法

2019-11-19 13:35:16

字体：大中小

来源：转载

供稿：网友

Vue 包含一组观察数组的变异方法，所以它们也将会触发视图更新。这些方法如下：

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

都有什么功能？动手试验了一下：

<body>  <div id="app">   <div>    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>   </div>    <div>    pop方法：    <input type="button" value="测试功能" @click="methodByPop">    <ul>     <li v-for="item of items">      <span v-text="item"></span>     </li>    </ul>   </div>   <div>    shift方法：    <input type="button" value="测试功能" @click="methodByShift">    <ul>     <li v-for="item of items">      <span v-text="item"></span>     </li>    </ul>   </div>    <div>    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>   </div>   <div>    splice方法：    <input type="button" value="测试功能" @click="methodBySplice">    <ul>     <li v-for="item of items">      <span v-text="item"></span>     </li>    </ul>   </div>   <div>    sort方法：    <input type="button" value="测试功能" @click="methodBySort">    <ul>     <li v-for="item of items">      <span v-text="item"></span>     </li>    </ul>   </div>    <div>   reverse方法：    <input type="button" value="测试功能" @click="methodByReverse">    <ul>     <li v-for="item of items">      <span v-text="item"></span>     </li>    </ul>   </div>   result显示的地方：<br>   <span v-text="result"></span>  </div>

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

得到下面的结论：

push() 往数组最后面添加一个元素，成功返回当前数组的长度

pop() 删除数组的最后一个元素，成功返回删除元素的值

shift() 删除数组的第一个元素，成功返回删除元素的值

unshift() 往数组最前面添加一个元素，成功返回当前数组的长度

splice() 有三个参数，第一个是想要删除的元素的下标（必选），第二个是想要删除的个数（必选），第三个是删除
后想要在原位置替换的值（可选）

sort() 使数组按照字符编码默认从小到大排序,成功返回排序后的数组

reverse() 将数组倒序，成功返回倒序后的数组

后来发现这些应该都是javascript本来的方法吧？以前javascript没学好，正好趁这次把这些方法的用法都给捡回来！

上一篇：vue检测对象和数组的变化分析

下一篇：详解vue添加删除元素的方法