数组中的响应式方法

最新推荐文章于 2022-04-19 16:42:10 发布

驮石的乌龟

最新推荐文章于 2022-04-19 16:42:10 发布

阅读量769

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/qq_44363897/article/details/104418026

版权

vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

数组中的响应式方法

push() — 向数组最后添加元素，可添加多个
pop() — 删除数组最后一个元素
shift() — 删除数组第一个元素
unshift() — 向数组最前面添加元素，可添加多个
splice() — 可用于删除/插入/替换数组元素
- 删除元素： splice(start , 要删除几个元素即删除元素的个数) — 若没有传第二个参数，则删除start后面的所有元素
- 替换元素：splice(start , 要替换元素的个数, 替换的元素)
- 插入元素：splice(start , 0 , 插入的元素) – 可插入多个元素
sort() — 排序
reverse() — 反转

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <script type='text/javascript' src='js/vue.js'></script>
</head>
<body>
 <div id="app">
   <ul>
     <li v-for="item in movies">{{item}}</li>
   </ul>
   <button @click="btnClick">按钮</button>
 </div>
 <script type='text/javascript'>
   const app = new Vue({
     el:'#app',
     data:{
       movies:['eee' , 'rrr' , 'ttt' , 'qqq' , 'yyy']
     },
     methods:{
       btnClick(){
         //1. push() -- 响应式,可以一次添加多个元素
         // this.movies.push('ooo','iii','ppp')
         // 2. 通过索引值修改数组中的元素 ---非响应式，数组改变，但界面没有重新渲染
         // this.movies[0] = 'cccc'
         // 3. pop() -- 响应式
         // this.movies.pop()
         // 4.shift() -- 响应式
         // this.movies.shift()
         // 5.unshift() -- 响应式，可以添加多个元素
         // this.movies.unshift('lll','xxx')
         // 6. splice(start) 可用于删除/插入/替换元素 -- 响应式
         //  删除元素：第二个参数传入要删除元素的个数
         // this.movies.splice(1,2)
         //  替换元素： splice(start, 要替换元素的个数, 替换的元素)
         // this.movies.splice(1,2,'fff','vvv')
         //  插入元素 ： splice(start , 0 , 插入的元素) -- 可插入多个元素
         // this.movies.splice(1,0,'p','j')
         // 7. sort() -- 响应式
         // this.movies.sort()
         // 8. reverse() --- 响应式
         // this.movies.reverse()
         // 9. Vue的set()方法
         //   set(要修改的对象 , 索引值 , 修改后的值)
         Vue.set(this.movies , 2 , 'jkl') //修改数组中的索引值为二的元素
       },
     }
   })
 </script>
</body>
</html>