Vue学习笔记-哪些数组方法是响应式的

 

 1 <html>
 2     <body>
 3         <div id="app">
 4             <ul>
 5                 <li v-for="item in letters">{{item}}</li>
 6             </ul>
 7             <button @click="btnClick">按钮</button>
 8         </div>
 9     </body>
10     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
11     <script>
12         const app = new Vue({
13             el: '#app',
14             data: {
15                 letters: ['a', 'b', 'c', 'd']
16             },
17             methods: {
18                 btnClick () {
19                     //1.push方法
20                     this.letters.push('aaa')
21                     //2.通过索引值修改数组中的元素虽然值被修改了，但是不能做到响应式
22                     this.letters[0] = 'bbbbbbb'
23                     //3.pop 删除数组中的最后一个元素
24                     this.letters.pop();
25                     //4.shift 删除数组中的第一个元素
26                     this.letters.shift();
27                     //5.unshift 在数组最前面添加元素
28                     this.letters.unshift('aaa')
29                     this.letters.unshift('aaa', 'bbb', 'cccc') //这个方法是可变参数
30                     //6.splice() 删除/插入/替换元素
31                     //删除元素：第一个元素表示起始位置，第二个参数表示删除几个,如果不传就表示删除后面所有的
32                     const start = 2
33                     this.letters.splice(start, this.letters.length-start)
34                     //替换:第二个参数表示要替换几个
35                     this.letters.splice(1,3,'m','n','l')
36                     //插入元素：第二个参数传入0，并且后面跟上要插入的元素
37                     this.letters.splice(1,0,'m','n','l')
38                     //7.sort()
39                     //8.reverse()
40  
41                 }
42             }
43         })
44         //可变参数...nums
45         function sum (...nums) {
46             console.log(nums) //其实是把所有参数放到一个数组里了
47         }
48 
49         sum(20, 300, 400, 12, 45, 55,78)
50     </script>
51 </html>

 

 

 

 

 

 

posted @ 2019-11-18 18:41  leahtao  阅读(119)  评论(0)  编辑  收藏  举报