vue中数组的变异方法

浅浅的花香味﹌ 2022-01-22 02:15 202阅读 0赞

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>

得到下面的结论：

push()  往数组最后面添加一个元素，成功返回当前数组的长度  
    pop()  删除数组的最后一个元素，成功返回删除元素的值  
    shift()  删除数组的第一个元素，成功返回删除元素的值  
    unshift()  往数组最前面添加一个元素，成功返回当前数组的长度  
    splice()  有三个参数，第一个是想要删除的元素的下标（必选），第二个是想要删除的个数（必选），第三个是删除  
                后想要在原位置替换的值（可选）  
   sort()  使数组按照字符编码默认从小到大排序,成功返回排序后的数组  
   reverse()  将数组倒序，成功返回倒序后的数组

转载地址：[https://blog.csdn.net/weixin\_35103712/article/details/64930119][https_blog.csdn.net_weixin_35103712_article_details_64930119]

[https_blog.csdn.net_weixin_35103712_article_details_64930119]: https://blog.csdn.net/weixin_35103712/article/details/64930119