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>

< >
  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)
    }
   }
  })
</ >

得到下面的结论：

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

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

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

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

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

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

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

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

继续阅读与本文标签相同的文章

无标签
最新文章 最热文章
收藏 打印

特别推荐 2026年05月15日 星期五

精彩发现

热门标签

阻止表单提交 窗口 关闭浏览器 清除 CDATA css文件 光标位置 坐标 javascrpt !important 超链接 数字

相关文章