vue中常用的响应式方法

<body>
  <div id="app">
    <ul>
      <li v-for="item in letters" :key="item">{
   
   {item}}</li>
    </ul>
    <button @click="btnClick">按钮</button>
    </div>
    <script src="../js/vue.js"></script>
    <script>
      const app = new Vue({
      
      
        el:'#app',
        data:{
      
      
          message:'你好',
          letters:['a','b','c','d']
        },
        methods:{
      
      
            btnClick(){
      
      
                //响应式方法：前7个方法是响应式方法，进行这些操作时，页面会做渲染，内容会改变。
                //1、push()方法:添加元素，可一次添加一个，也可一次添加多个
                // this.letters.push('aaaaa')
                // this.letters.push('aaaaa','bbbbb','cccccc')


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


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


                //4、unshift():在数组最前面添加元素，可一次添加一个，也可一次添加多个
                // this.letters.unshift('aaa')
                // this.letters.push('aaaaa','bbbbb','cccccc')


                //5、splice作用：刪除元素/插入元素/替換元素
                //刪除元素：
                //传入一个参数，表示删除第一个元素后面所有的元素
                // this.letters.splice(1)
                //传入两个参数，第二个参数传入要删除几个元素
                // this.letters.splice(1,2)

                //替换元素:第二个参数，表示我们要替换几个元素，后面是用于替换前面的元素
                // this.letters.splice(1,2,'m','n')

                //插入元素:第二个参数传入0,并且后面跟上要插入的元素。表示从第一个元素后边开始插入lmn
                // this.letters.splice(1,0,'l','m','n')


                //6、给数组中的元素排序
                // this.letters.sort()


                //7、反转数组内容的顺序
                // this.letters.reverse()


                //非响应式方法：作出的操作在浏览器页面看不到，但在控制台可以看到
                //方法：通过索引值修改数组中的元素
                // this.letters[0]='bbbbb'
                //可以通过以下两种响应式方法实现上述操作
                // this.letters.splice(0,1,'bbbbbb')
                Vue.set(this.letters,1,'cccc')
            },
        }
      })

      //写一个函数，可以实现传递不同个数的参数：(...sum)
      function sum(...num){
      
      
          console.log(num)
      }
      sum(123,100,99,98,87,60)

    </script>
</body>
vue中常用的响应式方法

猜你喜欢
