Vue - 数组中哪些方法是响应式的

最新推荐文章于 2024-05-15 00:08:39 发布
最新推荐文章于 2024-05-15 00:08:39 发布
阅读量296 收藏
点赞数
分类专栏： Vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33962481/article/details/119141490
版权

文章目录

一、数组中响应式的方法

1. push方法

<body>
  <div id="app">
    <ul>
      <li v-for="item in letters">{{item}}</li>
    </ul>
    <button @click="btnClick">添加</button>
  </div>

  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        letters: ['a','b','c','d']
      },
      methods: {
        btnClick() {
          this.letters.push('e');
        }
      }
    })
  </script>
</body>

2. pop方法

<body>
  <div id="app">
    <ul>
      <li v-for="item in letters">{{item}}</li>
    </ul>
    <button @click="btnClick">删除</button>
  </div>

  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        letters: ['a','b','c','d']
      },
      methods: {
        btnClick() {
          this.letters.pop();
        }
      }
    })
  </script>
</body>

3. shift方法

<body>
  <div id="app">
    <ul>
      <li v-for="item in letters">{{item}}</li>
    </ul>
    <button @click="btnClick">删除第一个</button>
  </div>

  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        letters: ['a','b','c','d']
      },
      methods: {
        btnClick() {
          this.letters.shift();
        }
      }
    })
  </script>
</body>

4. unshift方法

<body>
  <div id="app">
    <ul>
      <li v-for="item in letters">{{item}}</li>
    </ul>
    <button @click="btnClick">在第一个之前添加</button>
  </div>

  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        letters: ['a','b','c','d']
      },
      methods: {
        btnClick() {
          // 往数组第一个位置添加一个元素
          // this.letters.unshift('aa');
          // 往数组第一个位置添加多个元素
          this.letters.unshift('aa', 'bb', 'cc');
        }
      }
    })
  </script>
</body>

5. splice方法

splice方法有三个作用 , 分别是 : 删除元素/ 插入元素 / 替换元素

回顾splice语法

splice(start, end)

splice的三个参数

  • 第一个参数start : 表示从哪个元素索引开始.
  • 第二个参数 : 传入要操作几个元素.
    • 比如 : this.letters.splice(1, 2); 表示从第一个索引元素开始,删除两个元素
  • 第三个参数 : 要替换的参数, 可以有多个
    • 比如 : this.letters.splice(1, 2, 'm', 'n', 'l');, 表示把索引为一的元素往后两个元素替换为 m,n,l

使用splice添加元素

this.letters.splice(1, 0, 'm', 'n', 'l'); 表示从索引为一的位置, 添加’m’, ‘n’, ‘l’

6. sort方法

<body>
  <div id="app">
    <ul>
      <li v-for="item in letters">{{item}}</li>
    </ul>
    <button @click="btnClick">排序</button>
  </div>

  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        letters: ['a','c','d','b']
      },
      methods: {
        btnClick() {
          // 排序
          this.letters.sort();
        }
      }
    })
  </script>
</body>

7. reverse方法

<body>
  <div id="app">
    <ul>
      <li v-for="item in letters">{{item}}</li>
    </ul>
    <button @click="btnClick">反转</button>
  </div>

  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        letters: ['a','c','d','b']
      },
      methods: {
        btnClick() {
          // 反转
          this.letters.reverse();
        }
      }
    })
  </script>
</body>

二、数组中不是响应式的方法

1. 通过索引值修改数组中元素

<body>
  <div id="app">
    <ul>
      <li v-for="item in movies">{{item}}</li>
    </ul>
    <button @click="btnClick">点击</button>
  </div>

  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        movies: ['a', 'b', 'c', 'd']
      },
      methods: {
        btnClick() {
          this.movies[0] = 'aa';
          console.log(this.movies[0]);  // 'aa'
        }
      }
    })
  </script>
</body>
学习中的小菜鸟.
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue如何实现『数组』的响应式
weixin_44294593的博客
03-21 301
上源码，加上自己的理解： // 拿到数组的原型 const arrayProto = Array.prototype // 以数组的原型创建一个自己的对象，《创建一个对象作为拦截器》 // 这里暴露出去后会在 别处 <observe> 使用到，用于对数组类型原型的改变， // 使其在调用push等方法时会经过下面defineProperty中定义的方法， export const arrayMethods = Object.create(arrayProto) // --------① //
vue如何对数组做响应式的
gongye2019的博客
07-29 1302
你在面试中，有没有被问到vue是如何对数组做响应式处理的呢？ 1、找到响应式处理入口 进入页面，Vue开始初始化，执行new Vue()，进入到Vue的构造函数中，在构造函数中执行了_init()方法。 在_init()这个方法中，调用了initState()方法 => 在initState()方法中，调用了initData()方法 => 在initData()方法中，调用了observe()方法。 observe()方法就是Vue进行响应式处理的入口。 2、找到数组响应式处理入口 在obser
vue2响应式缺陷
Qiemo_的博客
05-15 4056
响应式 : 数据改变 ==> 视图跟着改变 vue2响应式缺陷 1.对象新增的属性没有响应式 对象,新增属性b,修改b的值,值改变但视图并未更新 解决方案 : 使用vue提供的 api $set(对象,属性名,值) 效果如属性c 2.数组的部分操作没有响应式 数组中有7种操作有响应式 array.pop() array.push() array.shift() array.unshift() array.sort() arry.reverse() array.spl.
vue中数组的响应式
wlijun_0808的博客
11-06 5989
vue中数组的响应式
Vue里面数组哪些方法是响应式的
最新发布
2401_84093310的博客
05-15 669
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
Vue 哪些数组的方法是响应式的？
Heyuner的博客
07-03 1777
因为vue是响应式的，所以当数据发生变化时，vue会自动检测数据的变化，视图会发生对应的更新。 vue中包含了一组观察数组编译的方法，使用他们改变数组也会触发视图的更新。 push() //往数组最后添加元素 pop() //删除数组中最后一个元素 shift() //删除数组中第一个元素 unshift() //在数组最前面添加元素 splice() //删除元素/插入元素/替换元素 splice(start,length,元素) 删除元素：第二个参数传入你要删除几个元素（如果没有传
Vue中数组的响应式操作
A____t的博客
04-15 3379
数组的响应式操作
Vue里的数组方法（响应式和非响应式）
宝子的博客
06-07 1224
vue里操作数组的常用方法，简单详细。
浅谈Vue响应式(数组变异方法)
08-27
在 Vue 中，数组的变异方法需要使用特殊的方法来实现响应式。 Vue 使用了一个拦截器来拦截数组的变异方法，例如 push、pop、shift、unshift、splice、sort 和 reverse 等。这是因为这些方法会改变数组的内容，但并...
使用Vue.set()方法实现响应式修改数组数据步骤
10-16
为了解决这个问题，Vue提供了一个`Vue.set()`方法，专门用于确保数组或对象的响应式更新。 `Vue.set()`方法的使用方式如下： ```javascript Vue.set(object, index, value); ``` - `object`: 需要修改的数据源，...
Vue数组响应式操作及高阶函数使用代码详解
10-15
本文将详细讲解Vue中的数组响应式操作以及如何结合高阶函数来更高效地处理数组。 首先，Vue对数组的响应式操作是通过拦截和重定义一些特定的方法实现的，包括`push`、`pop`、`shift`、`unshift`、`splice`等。以下...
vue数组响应式的方法详解
lzh的博客
02-04 807
vue数组的方法 push方法，可以做到响应式 可以传入一个值 可以传入多个值 <script> this.letters.push('aaa'); this.letters.push('aaa','bbb','ccc'); </script> pop():删除数组中的最后一个元素，可以做到响应式 <script> this.letters.pop(); </script> shift():删除数组中的第一个元素，可以做到
vue中的数组哪些方法是响应式的
qq_39285162的博客
11-11 696
vue中的数组哪些方法是响应式的，通过刷新改变DOM 我们常用到的操作数组的方法都是响应式的，可以对数组进行相应的操作 push()尾部插入DOM // push方法 this.letters.push('aaa') this.letters.push('aaaa', 'bbbb', 'cccc') pop() 尾部删除 //pop(): 删除数组中的最后一个元素 this.letters.pop(); shift（）头部删除 //shift(): 删除数组中..
vue中哪些数组的方法可以做到响应式？
骑大马挎大刀
05-26 2462
一：可以做到响应式的方法:一下方法可以做到数组改变，页面上数据相应 1、删除数组最后一位元素：pop() 2、向数组最后面添加元素：push() 。注意：可以添加多个元素，比如 letters.push( ‘a’ , ‘b’ ) 3、删除数组第一位元素：shift() 4、向数组最前面添加元素：unshift()。注意：可以添加多个元素，比如 letters.unshift( ‘a’ , ‘b’ ) 5、删除（或插入或替换）数组元素：splice() 比如删除元素：splice(2) 是 从第二位开始删除
vue中数组的七个响应式方法
weixin_48503807的博客
05-27 4495
vue中数组的七个响应式方法 起因： ​ 在使用vue实习中，通过数组的索引改变了数组中的值，测试时发现，更改成功了，但是试图无响应。 原因： *通过索引值修改数组元素,不是响应式方法* // 以下代码，虽然可以正确更改索引为0的那一项，但是视图上并不会相应改变 this.person[0]='adda'; 解决： ​ vue 中包含一组观察数据变异的方法。 1.push（）：该方法是在数组最后添加数据 假设数组为array ​ this.array.push(‘a’) ==> 在数组arra
vue学习笔记 数组中的响应式方法
qq_41937087的博客
06-02 682
vue学习笔记 数组中的响应式方法 在数组中常用的响应式方法： 1、push方法 从数组的最后添加元素，可以是一个元素也可以是多个元素。 例子： array.push("elem1"); array.push("elem1", "elem2", "elem3", "elem4"); 2、pop方法 删除数组的最后一个元素。 例子： array.pop(); 3、unshift方法 从数组的前面添加元素，可以是一个或多个。 例子： array.unshift(elem1); array.unshift(e
Vue-数组中的响应式方法-push pop shift unshift splice sort resourse
ICanWin_lll的博客
01-18 2855
一、vue中数组中的响应式的方法 push pop shift unshift splice sort resourse 1.push() 数组尾添加一个元素 letters: ['a', 'b', 'c', 'd'] this.letters.push('aaa') this.letters.push('aaaa', 'bbbb', 'cccc') letters:['a', 'b', 'c', 'd','aaaa','bbbb','cccc'] 2.pop() 删除数组中的最后一个元素
vue数组的响应式方法
dawnStart的博客
04-01 965
1、push()方法，在数组中最后添加元素； 2、pop()方法，删除数组中的最后元素； 3、shift()方法，删除数组中的第一个元素； 4、unshift()方法，在数组最前面添加元素； 5、splice(start,end)方法，删除元素、插入元素、替换元素； 删除元素：第二个参数传入你要删除的几个元素（如果没有传就删除后面所有元素)； 替换元素：第二个参数，表示我们要替换几个元...
vue数组中哪些方法是响应式的
weixin_42661283的博客
11-01 935
Vue数组中响应式的方法： push() 在数组最后元素中追加元素 pop() 删除数组最后一个元素 shift() 删除数组中第一个元素 unshift() 在数组前面元素中追加元素 splice() 删除、插入、替换元素 sort() 排序 reverse() 反转 <div id="app"> ...
vue3数组中嵌套对象怎么实现响应式
04-15
可以使用Vue3中提供的reactive函数将数组和对象都转换为可响应式的数据。示例代码如下： ```javascript import { reactive } from 'vue'; const state = reactive({ arr: [ { id: 1, name: 'apple' }, { id: 2,...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值