十、数组中的响应式方法 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <script src="../jquery/vue.JS"></script>
  </head>
  <body>
    <div id="app">
      <ul>
        <li v-for="item in letters">{{item}}</li>
      </ul>
      <button @click="btnClick">按钮</button>
    </div>
    <script>
      const app = new Vue({
        el: "#app",
        data: {
          letters: ['A','B','C','D','E']
        },
        methods: {
          btnClick(){
            //1. push方法  添加
            //this.letters.push("aaa");
            //this.letters.push("aaa","bbb","ccc");

            //2. pop()  
            //删除数组中的最后一个元素
            //this.letters.pop()

            //3. shift()
            //删除数组中的第一个元素
            //this.letters.shift()

            //4. unshift()
            //在数组的最前面添加元素
            //this.letters.unshift("bbb")
            //this.letters.unshift("aaa","bbb","ccc");
            
            //5. splice()
            //splice的作用：删除元素/插入元素/替换元素
            // param1：索引下标
            // param2：
            //    删除元素：移除的数量（如果没有传，就删除下标后的所有元素）
            //    插入元素：参数必须为0表示插入，并且后面跟上要插入的元素
            //    替换元素：表示我们要替换几个元素，后面是用于替换前面的元素
            // param3：添加的数据
            //this.letters.splice(2,0,"BBB")

            //6. sort()
            // 排序
            //this.letters.sort();

            //7. reverse()
            //将数据进行反转
            //this.letters.reverse();


            //通过索引值修改数组中的元素 不是进行的动态的刷新
            //8. 通过索引值修改数组中的元素
            //this.letters[0] = "bbbb";

            /**
             * vue内部的实现方式 Vue.set() 方法
             * param1：要修改的对象
             * param2：索引值
             * param3：修改后的值
            */
            Vue.set(this.letters,0,"bbb")
          }
        }
      });
    </script>
  </body>
</html>

　　

posted @ 2022-04-06 17:19  搬砖工具人  阅读(42)  评论(0)    收藏  举报