Vue.js中数组的两个奇葩操作，list.length=0作清空、利用下标去改值均不起作用？

最新推荐文章于 2024-04-26 17:54:13 发布

谭耀迪

最新推荐文章于 2024-04-26 17:54:13 发布

阅读量1.6k

点赞数 1

分类专栏： Vue 经验分享文章标签： vue.js html node.js javascript

本文链接：https://blog.csdn.net/e5132712/article/details/116426716

版权

经验分享同时被 2 个专栏收录

11 篇文章 2 订阅

订阅专栏

Vue

3 篇文章 0 订阅

订阅专栏

Vue.js中数组的两个奇葩操作，list.length=0作清空、利用下标去改值均不起作用？

一、两个奇葩操作
- 二、解决（替换）方法

一、两个奇葩操作

定义数组为list，要想让list里的内容清空，脑子里的代码是不是：
list.length=0 ,我们来试一下：
这是原始代码，往list里添加了a、b。

<body>
   <div id="app">
       {{list}}
   </div>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                list:['a','b']
            },
            methods:{
            },
        })
    </script>
</body>

跑一下
在这里插入图片描述
在控制台输入list.length=0，看能不能成功清除：

结果是：不起作用，那么，为什么呢？
这是因为我们的原生js有个缺陷，对于数组.length=0清空这个做法并不能得到响应,因为它用的是Object.defineProperty()，它具有这个特性。
另外还有一个奇葩操作就是，如果想让数组里的a，修改为y，
输入list[0]='y’也是不起作用的，下面我们来验证一下：
在这里插入图片描述

二、解决（替换）方法

那么，问题存在，必然要知道解决办法。
1，清空问题
vm.list.length=0不起作用，我们可以绕一个弯，用splice:
vm.list.splice(0,vm.list.length)
操作示范：
在这里插入图片描述
成功清空！
2，利用下标改值问题
其实list[0]=‘y’，不是不起作用，它已经修改了数据，只是没有重新渲染出来，
我们只要在修改后重新渲染一遍就可，使用￥forceupdate():

搞定

谭耀迪

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
1
评论
Vue.js中数组的两个奇葩操作，list.length=0作清空、利用下标去改值均不起作用？

Vue.js中数组的两个奇葩操作，list.length=0作清空、利用下标去改值均不起作用？一、两个奇葩操作二、解决（替换）方法一、两个奇葩操作定义数组为list，要想让list里的内容清空，脑子里的代码是不是：list.length=0 ,我们来试一下：这是原始代码，往list里添加了a、b。<body> <div id="app"> {{list}} </div> <script> var
复制链接

扫一扫