【Vue学习】数组中有哪些方法是响应式的？

最新推荐文章于 2022-05-27 20:28:32 发布

qq_38984804

最新推荐文章于 2022-05-27 20:28:32 发布

阅读量122

点赞数

分类专栏： vue学习文章标签： vue js java

本文链接：https://blog.csdn.net/qq_38984804/article/details/108329955

版权

vue学习专栏收录该内容

1 篇文章 0 订阅

订阅专栏

【Vue学习】数组中有哪些方法是响应式的？

见代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>响应式数据</title>
</head>
<body>
<div id="app">
  <ul>
    <li v-for="item in letters"> {{item}}</li>
  </ul>
  <button @click="onclick()">按钮</button>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:"#app",
    data:{
      letters: ['a','b','c','d','1','2','3']
    },
    methods:{
      onclick() {
        // 1.put 将元素添加到数组后方
        // this.letters.push('4'); //a b c d 1 2 3 4
        // 2.pop() 将数组最有一个元素弹出
        // this.letters.pop(); //a b c d 1 2
        // 3.shift() 将数组第一个元素弹出
        // this.letters.shift();//b c d 1 2 3
        // 4.unshift() 在数组前追加元素
        // this.letters.unshift('aaa','vvv','ssss');//aaa vvv ssss a b c d 1 2 3
        // 5.splice() 删除\插入\替换元素
        // this.letters.splice(1,2);//从第1个元素后开始删除2个元素     a d 1 2 3
        // this.letters.splice(2,0,'qqq','qwq','wsz');//从第二个元素后插入3个元素       a b qqq qwq wsz c d 1 2 3
        // this.letters.splice(2,1,'cc');//替换第3个元素      a b cc d 1 2 3
        // 6.sort() 排序
        // this.letters.sort(); //1 2 3 a b c d
        // 7.reverse() 翻转
        // this.letters.reverse(); //3 2 1 d c b a

        //注意：通过索引值来改变数组中的元素不能做到响应式
        // this.letters[0] = 'aaa';
        //补充：set(要修改的对象，索引值，修改后的值)  注意‘Vue’大写
        Vue.set(this.letters,0,'aaa') //     aaa b c d 1 2 3
      }

    }
  })
</script>
</body>
</html>

通过索引值改变数组中的元素不能做到响应式

qq_38984804

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【Vue学习】数组中有哪些方法是响应式的？

【Vue学习】数组中有哪些方法是响应式的？见代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>响应式数据</title></head><body><div id="app"> <ul> <li v-for="item in letters"> {{item
复制链接

扫一扫