vue 循环出来的数据不能记录长度

墨衍会员 · AI 创作全网分发 墨衍智能分发 本文由作者通过墨衍一键同步至各平台 1分发平台 1.3k累计阅读 1.3k平均单平台已同步平台优快云微信公众号微博知乎掘金百家号博客园抖音小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网我也要 → 码龄10年

关注

原创最新推荐文章于 2026-06-14 14:04:28 发布 1.3k 阅读 AI 写同款· GEO 优化 ›

Vue不能观察到数组length的变化由于 JavaScript 的限制，Vue 不能检测以下变动的数组：当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue 当你修改数组的长度时，例如：vm.items.length = newLength 因为vue的响应式是通过 Object.defineProperty 来实现的，但是数组的length属性是不能添加getter和setter，所有无法通过观察length来判断。为什么Vue不能观察到数组length的变化如下代码，虽然看起来数组的length是10，但是for in的时候只能遍历出0, 1, 2，导致了只有前三个索引被立即下载

1、length这个只能记录（字符串、对象）

stringObject.length

网址：http://www.w3school.com.cn/jsref/jsref_length_string.asp

正常我v-for循环出来的是字符串基本都是可以使用length，如果是数字啥的可能就不行了，需要我们转换类型了

你循环出来的变量.toString().length

toString()是转化成字符串

收录于

技术（javascript）

当前文章被收录于：

技术（javascript）

115 篇文章 0 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

【雷达】基于matlab合成孔径雷达干涉测量（InSAR）时序分析【含Matlab源码 9037期】合成孔径雷达干涉测量（InSAR）时序分析完整代码，包运行；可提供运行操作视频！适合小白！阅读详情

相关推荐

从《新程序员》系列看程序员职业发展趋势与成长路径

在信息技术日新月异的当下，软件开发行业蓬勃发展，程序员作为行业的核心力量，其成长与发展路径备受瞩目。《新程序员》系列杂志应运而生，以其前瞻性的视角、丰富多元的内容，为广大程序员尤其是新程序员提供了洞察行业趋势、学习前沿技术、汲取前辈经验的宝贵窗口。该系列杂志由优快云精心打造，自推出以来，便在开发者群体中引发了强烈反响。《新程序员》系列内容涵盖了从基础技术知识的深入解读，到行业前沿趋势的精准预测；从优秀开发者的成长历程分享，到各大企业数字化转型的实践案例剖析等多个维度。

AllenLV的博客 2259

v-for获取（循环次数）对象的length长度

v-for获取（循环次数）对象的length长度用户场景：循环出来的样式第一个和最后一个的样式。用户根据循环出来的第几个，逐一判断，对应的增加不同的样式。代码如下： <div v-for="(class,index) in lessons" :key="index" :data-length="lessons.length"> 当前：第{{class.num}}节课. {{class.title}} / 共{{class.time}}分钟开课时间：{{class.beg

草巾冒小子的博客 5233

四大厂商网络设备巡检命令实战指南：华为、华三、锐捷、思科

本文详细介绍了华为、华三、锐捷、思科四大厂商网络设备的巡检命令实战指南，涵盖硬件状态、软件运行和网络功能等核心维度。通过具体命令示例和实用技巧，帮助网络工程师高效完成设备巡检，预防潜在故障，确保网络稳定运行。

weixin_29235923的博客 391

JS【详解】数组 (含常用的操作数组的lodash)

创建数组方式 1 - 字面量 let arr1 = []; let arr2 = [1,2,3]; 方式 2 - 新建数组实例 let arr1 = new Array(); // 参数为空,得到一个空数组 [] let arr2 = new Array(4); // 参数为一个数值时表示数组的长度，得到 [null,null,null,null] let arr3 = new Array(15, 16, 17); // 参数为多个数值时表示数组中的元素，得到[15,16,17] 方式.

朝阳39的博客 2025

解锁Cherry Studio高阶玩法：用MCP实现自动化测试与数据爬取

本文深入探讨了如何利用MCP协议与Cherry Studio结合，实现自动化测试与数据爬取的高阶应用。通过Playwright等工具的MCP集成方案，详细解析了自动化测试流水线构建和智能爬虫系统开发的关键技术，显著提升工程效率和系统适应性。

defi6farmer的博客 275

基于多智能体深度强化学习的空地协同通信系统轨迹设计与访问控制

所属子方向： UAV assisted communication 名词注释 coordinated：协调、协同 base stations 基站，公用移动通信基站，是移动设备接入互联网的接口设备，是指在一定的无线电覆盖区中，通过移动通信交换中心，与移动电话终端之间进行信息传递的无线电收发信电台。 UAV-BS：无人机基站 cooperative-competitive game：合作竞争博弈 throughput ：吞吐量，每秒比特数 bps，bits per second Determinis

skysys的研究小屋 4969

vue set属性的不能为length关键字

不能给对象数据新增属性为：length 不然这个数据为空。记录此bug，以后铭记

qq_31001061的博客 570

COMSOL仿真避坑指南：列管反应器模拟中多孔介质与化学反应设置的5个常见错误

本文详细解析了COMSOL仿真中列管反应器模拟的5个常见错误，包括多孔介质模型选择、化学反应接口配置、对流扩散方程处理、薄层热阻设置及网格独立性验证。特别针对多孔介质与化学反应设置的误区，提供了实用的判断标准和修正方法，帮助工程师避免计算偏差，提升仿真精度。

weixin_29597551的博客 321

在Vue的v-for循环语句中，怎么获取数组对象的长度

听海边涛声 994

CARAFE轻量级上采样算子详解：从原理到YOLOv5/YOLOv8实战魔改全攻略

摘要：本文探讨了CARAFE（内容感知特征重组）上采样算子在YOLOv5/YOLOv8目标检测模型中的应用。传统上采样方法（如最近邻插值）易丢失细节信息，而CARAFE通过内容自适应机制和大感受野特性，动态生成上采样核，显著提升小目标检测性能。文章详细解析了CARAFE的算法原理（核生成与特征重组两步），并提供了在YOLOv5/YOLOv8中集成的代码实现与配置修改方案。实验表明，引入CARAFE后模型mAP提升约0.6%，且保持轻量级优势。此外，文中还总结了训练调优技巧、部署优化方案及常见问题解决方法，

FJN110的博客 917

eCognition易康操作教程（一）：如何利用eCognition易康软件进行影像分割之棋盘分割、四叉树分割、光谱差异分割

进程执行完成后，植被覆盖区域与裸地区域合并了。第三步：清除分割结果，点击“Image Objects”菜单栏，点击“Delete Level(s)”，选中“ResultLevel1”，点击”ok”删除棋盘分割结果。四叉树分割之后，有的正方形大一些，有的正方形小一些，大说明该区域的光谱特性更加均一，而小说明不太均一。Leve：选择运行算法的矢量层名称，这里选择四叉树分割算法得到的矢量层“ResultLevel2”。Image Layer weights：图层权重，这里设置为“1，1，1，1”。

蒹葭苍苍 4608

vue 获取数组长度_Vue数据响应式

响应式是一种设计模式。页面响应式布局就是根据页面缩放大小调整布局，数据响应式就是代码根据数据变化作出反应。深入响应式原理 — Vue.jscn.vuejs.org简单来说，当我们把一个 JavaScript 对象传入 Vue 实例作为data选项时，Vue将遍历此对象所有的 property，使用Object.defineProperty把这些 property 全部转为getter/sette...

weixin_39793638的博客 8497

qiankun(微前端) - 解决Element组件库部分样式失效，主应用和子应用分别使用element-ui和element-plus，前端微应用qiankun样式无效污染隔离子应用样式影响其他应用

乾坤qiankun，微前端，vue，qiankun主应用使用vue2+elementui子应用使用vue3+element plus样式失效，子应用样式影响其他应用样式问题，qiankun项目与子应用样式混乱问题，彻底搞定样式污染，前端微应用qiankun样式污染，组件样式部分失效怎么办，互相影响，qiankun子应用中使用element-plus样式失效问题，组件库样式污染混乱，子应用样式影响到主应用怎么办，微前端qiankun子应用样式影响其他应用样式，样式冲突，Vue+qiankun框架样式混乱问题的

✅ 精选推荐文章 8874

vue 判断字符串是否是英文_Vuejs Element input组件区分中英文统计长度

偶尔用Vue写写CMS后台界面，记录一下遇到的不常见的问题。需求文本显示长度限制，中文、中文标点、全角字符按1长度，英文、英文符号、数字按0.5长度计算。即"hh哈哈h"在js中长为5，在这里的需求中长3.5。主要控制一下最终字符串的显示长度。1.png正则匹配长度这个比较简单，可以搜到大把现成的正则表达式，这里比较好的是在Unicode表上面直接选对应区间:Unicode table这里用正则匹...

weixin_28818721的博客 1908

假人有限元模型

假人模型，车辆碰撞假人有限元模型，适合做乘员安全的研究者利用

精雕软件(JDpaint) 5.5 绿色版

精雕软件(JDpaint) 5.5 绿色版精雕软件(JDpaint) 5.5 绿色版精雕软件(JDpaint) 5.5 绿色版

Vue中v-for隐藏的坑 - 不能实时更新

用v-for循环出一个子组件，更新父组件的状态时，希望子组件中相应更新状态，可是，更新后的状态却没有传递到子组件中进行更新，问题的解决历程如下： 1. 反省是不是我哪里的写法错了，忘记加key，于是加上key主键：然而并未有什么作用？我首先确认了，父组件中状态确实更新了，那么子组件中呢 2.父组件setXXState方法执行后，我让子组件TitleBox组件forceUpdate(...

reffrselom的博客 5971

华为的C语言编程规范.pdf

华为技术有限公司内部技术规范。本规范制定了编写C语言程序的基本原则、规则和建议。从代码的清晰、简洁、可测试、安全、程序效率、可移植各个方面对C语言编程作出了具体指导。

vue数据变化但页面不变

在Vue中有两种类型的变量：响应式变量和非响应式变量。在后端获取的变量，通常是响应式变量，他们会被vue监测到变化并同步到页面上，如果你修改了这些响应式变量，页面会随之改变。通过赋值来定义的变量，通常是非响应式变量，如果你修改了这些非响应式变量，vue不会监测到他们的变化，所以页面不会改变。如果你需要非响应式变量变成响应式变量，可以使用Vue.set方法或者数组的变异方法（例如push、splice等）Vue.set(对象，添加的key, 属性值)

peppa_pig的博客 2180

直击Vue2/3watch的底层逻辑，字符串长度对侦听效率的影响

vue中watch的实现机制，数据长度的扩充对watch效率的影响。vue中如何实现对数据变化的侦听。字符串长度变化对侦听过程有哪些影响。

RenGJ010617的博客 2717

dom vue 加载完执行_vueJs实现DOM加载完之后自动下拉到底部的实例代码

这篇文章给大家介绍vueJs实现DOM加载完成之后自动下拉到底部，文中给大家记录了整个问题的过程，对实现思路感兴趣的朋友大家阅读下本文。/.....................................更新..................................../这个问题是很早之前遇到的，后来想来，其实是个很简单的问题。在dom记载完成就自动下拉到底部，只需要使用Vue....

weixin_39983554的博客 290

vuejs小白记录

1、vuejs的数组变化如果使用array[index]=value，或者array.length=newlength是检测不到的，可以使用array.splice(index,1,value)或array.splice(newlength)来修改数组元素或者长度让vue检测到。 2、jq通过遍历操作样式会显得很慢，如果要实现点击对vue遍历生成的某行让其修改该行的样式或显示，可以通过

ai834398016的博客 344

封装 vue 组件的过程记录

在我们使用vue的开发过程中总会遇到这样的场景，封装自己的业务组件。封装页面组件前要考虑几个问题：1、该业务组件的使用场景 2、在什么条件下展示一些什么数据，数据类型是什么样的，及长度颜色等 3、如果是通用的内容，比如ajax数据交互部分肯定是一个通用性的东西，怎么数据请求作到通用，返回的数据分配出去又不会出错。先看一个简单的例子： APP中常用的一个场景，点开我的信息右箭头可做编辑...

weixin_34179762的博客 1万+

Vue 问题记录

Vue 问题记录汇总日常开发中遇到的关于vue的问题 VeeValidator 语言设置校验消息默认是英文的，定义中文或其他语言的错误提示消息 import VeeValidate from 'vee-validate'; import Vue from 'vue' Vue.use(VeeValidate) var dict = { zh_CN: { messages: { r...

dongjie9996的博客 372

记录一下Vue 的数据渲染格式

记录文章，之前写的数据渲染格式很乱。总结：后台返回的数据一定要是变动的，不变的数据在前端做渲染就行。然后再考虑怎么渲染上去。吃了经验少的亏。多沟通，即使会被喷。 // 渲染数据 getWorkSafetyInfo() { getWorkSafetyInfo().then(res => { // 这里后台用JsonResult<> 封装了一下，所以多了一层级 const { data, success } =...

qq_41915777的博客 525

vue element时间选择不能超过今天时间选中长度不能超过7天

element日期时间选择限制。未选择，不能超过今天；选择，设置连续选择时间不能超过7天

在职可交流前端开发，包括：web端、uniapp等，欢迎指教。 1171

Vue学习记录

el挂载点作用在el选项命中的元素及其内部的后代元素默认选择id选择器(建议使用) 支持其他选择器，其他元素不要把el挂载到html和body标签上 data对象 Vue中用到的数据定义在data中 data中可以写复杂类型的数据渲染复杂类型数据时，遵守js语法 Vue指令内容绑定，事件绑定 v-text,v-html,v-on基础显示切换，属性绑定 v-show,v-if,v-bind 列表循环，表单元素绑定 v-for,v-on补充,v-model v-text 设置标签的文本值

sunshine的博客 283

vue框架中调用其他对象的方法无法得到响应体中数组的长度的问题

vue 的生命周期 vue的生命周期存在8个区间，分别是 **beforeCreate**(创建之前)、**Created**(创建后)、 **beforeMount**(挂载前，ps:在数据呈现在页面之前) 、**Mounted**(挂载后)、**beforeUpload**(更新前)、 **uploaded**(更新后) 、**beforeDestory**(销毁前)、 **Destoryed**(销毁后)。从字面意思不难看出来，vue框架里一个页面的创建到销毁的过程中，这些函数的运行顺序。

weixin_44980106的博客 721

上一篇： vue打包命令

下一篇： python里面的xlrd模块

从《新程序员》系列看程序员职业发展趋势与成长路径

AllenLV的博客

01-13

2259