Day15——数组中哪些方法是响应式的

最新推荐文章于 2022-05-02 20:58:45 发布

Android_la

最新推荐文章于 2022-05-02 20:58:45 发布

阅读量152

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_40634846/article/details/107411021

版权

Vue 专栏收录该内容

25 篇文章 2 订阅

订阅专栏

文章目录

一. 回顾
二. 数组中的响应式方法

一. 回顾

前面学习了Day14——v-for循环遍历，今天学习数组中哪些方法是响应式的。

二. 数组中的响应式方法

这里直接给出例子，具体用法以及作用在注释中，如下：

<body>
<div id="app">
  <ul>
    <li v-for="item in letters" >{{item}}</li>
  </ul>
  <button @click="btnClick">按钮</button>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      letters: ['a', 'b', 'c', 'd']
    },
    methods: {
      btnClick(){
        // this.letters.push('aa');
        // this.letters.push('aaa', 'bbb', 'ccc');
        // this.letters.pop();//删除数组中最后一个元素
        // this.letters.shift();//删除数组第一个元素
        // this.letters.unshift('aaa');//在数组最前面添加元素
        // this.letters.unshift('aaa', 'bbb', 'ccc');//在数组最前面添加元素
        /**
         * splice作用：插入元素/删除元素/替换元素，
         * 第一个参数是从哪个位置(是数组的下标，从0开始)开始插入、删除、替换元素。
         * 删除元素：第二个参数是你要删除几个元素,如果没有传入，则删除后面所有元素
         * 替换元素：第二个参数表示我们要替换几个元素，剩余的则插入进来
         * 插入元素：第二个参数是0，表示我什么元素都不替换，插入进去
         */
        const start = 2;
        // this.letters.splice(start);//删除start以及后面所有元素
         // this.letters.splice(start, this.letters.length-start);//删除指定多少个元素
        // this.letters.splice(1, 2, 'm', 'n', 'l');//替换2个元素，第三个插入
        // this.letters.splice(1, 0, 'm','n', 'l');//在下标1处插入元素
        // this.letters.sort();//排序
        // this.letters.reverse();//反转

        //通过索引修改数组元素不是响应式的
        // this.letters[0] = 'bbb';
        //如果需要修改数组元素，则使用splice()替换元素
        //或者使用Vue.set(要修改的对象, 索引值, 修改后的值)
        // Vue.set(this.letters, 0, 'bbb');
      }

    }
  })
</script>
</body>