老杜Vue 2+3 (53) 数组的响应处理(笔记)

前言:

本文章是通过学习b站老杜的Vue 2+3 视频,所记录的心得笔记

正文:

1.前一节知识点:

Vue会给data中的所有属性做响应式处理,当然后期添加的属性可以选择添加响应式,也可以不添加响应式

2.问题1:

data中的数组通过下标的形式修改数组内的数据,是否也做了响应处理呢?

代码验证想法:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>通过下标修改数组,是否用于响应式处理</title>
    <script src="../../js/vue.js">

    </script>
</head>
<body>
    <div id="mydiv">
        <h1>{{msg}}</h1>
        <ul>
            <li v-for="(value,index) in arr">
                {{value}}
            </li>
        </ul>
    </div>
    <script>
        const vm =new Vue({
            el: '#mydiv',
            data:{
                msg:"通过下标修改数组,是否用于响应式处理",
               arr:["Jack","Tom","Jim"]
            }
        })
    </script>
</body>
</html>

结果:如下
1.直接修改整个数组,发现页面展示内容也变了,说明data中的arr属性做了响应式处理
在这里插入图片描述
2.但是通过下标进行修改数组,结果如下:
在这里插入图片描述

结论:通过数组下标去修改数组中的元素,默认情况下没有添加响应式处理

3.处理问题1的方法

方法1:将数组的元素换为对象的形式,通过点 元素对象.属性的形式进行修改对象的属性值
在这里插入图片描述

4.处理问题1的方法2

使用Vuet提供的7个API:
push(): 把一个或多个元素添加到数组的末尾,并返回数组的新长度。
作用:用于向数组末尾添加元素。
用法示例:array.push(item1, item2, …)

pop(): 移除数组中的最后一个元素,并返回该元素的值。
作用:用于删除数组中的最后一个元素。
用法示例:array.pop()

reverse(): 颠倒数组中元素的顺序,原先的第一个变为最后一个,原先的最后一个变为第一个。
作用:用于颠倒数组中元素的顺序。
用法示例:array.reverse()

splice(): 在指定位置修改数组,可以删除、替换或添加元素,并返回被删除的元素组成的数组。
作用:用于修改数组中的元素。
用法示例:array.splice(start, deleteCount, item1, item2, …)

shift(): 移除数组中的第一个元素,并返回该元素的值。
作用:用于删除数组中的第一个元素。
用法示例:array.shift()

unshift(): 在数组的开头添加一个或多个元素,并返回数组的新长度。
作用:用于向数组开头添加元素。
用法示例:array.unshift(item1, item2, …)

sort(): 对数组的元素进行排序,可以指定排序方式。
作用:用于对数组中的元素进行排序。
用法示例:array.sort(compareFunction)

以上方法对数组进行需要的操作,都会有响应式处理
或者使用

实践出真理,以上知识点都需要动手敲代码才能,熟练掌握

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值