vue.js学习笔记之数组的变异方法

最新推荐文章于 2024-06-18 09:46:23 发布

yooovan

最新推荐文章于 2024-06-18 09:46:23 发布

阅读量1.1w

点赞数 5

分类专栏：手机跨平台应用开发记录笔记文章标签： javascript vue.js 变异方法

本文链接：https://blog.csdn.net/weixin_35103712/article/details/64930119

版权

手机跨平台应用开发记录笔记专栏收录该内容

6 篇文章 0 订阅

订阅专栏

今天阅读vue官网的guide（https://vuefe.cn/v2/guide/list.html），看到一个观察数组的变异方法。编译方法？？？excuse me??什么东西？？guide就给了这么一堆东西：

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没学好，正好趁这次把这些方法的用法都给捡回来！

记录一下。

yooovan

关注

5
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
vue.js学习笔记之数组的变异方法

今天阅读vue官网的guide（https://vuefe.cn/v2/guide/list.html），看到一个观察数组的变异方法。编译方法？？？excuse me??什么东西？？guide就给了这么一堆东西：Vue 包含一组观察数组的变异方法，所以它们也将会触发视图更新。这些方法如下：push()pop()shift()unshift()splice()sort()reve
复制链接

扫一扫