vue动态渲染ref,获取this.$refs.xxx.style为undefined获取循环元素中的style

2023-11-06

正常情况下通过this.$refs.xxx.style获取是没问题的,本文遇到的是要获取循环列表中某一元素,并改变其样式
设置ref在v-for列表上,直接获取this. r e f s . n a m e . s t y l e ,永远是空的, t h i s . refs.name.style,永远是空的, this. refs.name.style,永远是空的,this.refs.name是一个数组,无法通过 .style 获取样式,
只能遍历这个this. r e f s . n a m e 数组,在 t h i s . refs.name数组,在this. refs.name数组,在this.refs.name[index]上设置样式

<div class="left_floor">
                <div 
                    ref="ll" 
                    @mouseleave='handleLeave(i)' 
                    @mouseover="llOver(i)" 
                    v-for="(item,i) in 49" 
                    :key="i" :style="{bottom: i*10+'px'}"></div>
            </div>
     </div>
llOver(index){
    this.floor = index+1
     this.$refs.ll[index].style.backgroundColor = 'rgb(8, 20, 75)'
 },
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

vue动态渲染ref,获取this.$refs.xxx.style为undefined获取循环元素中的style 的相关文章

  • 我可以通过什么方式混合 jQuery 和 vanilla JavaScript

    我有一个用普通 JavaScript 编写的 Web 应用程序 我想用 jQuery 动画来增强它 并使用我在各种 jQuery 插件中找到的一些功能 例如上传 http www uploadify com 可以通过什么方式将 jQuery
  • 在 Vue 3 的生产构建过程中从 Vue 模板中删除所有数据测试属性

    我在 TS 中使用 Vue3 最后一个 vue cli 我想在 vue loader 编译 vue 文件时获取所有节点 vnodes 元素 我需要读取节点属性并删除所有 数据测试 我尝试在 vue config js 中使用 module
  • 为什么省略分号会破坏这段代码?

    或者换句话说 为什么分号插入失败 导致下面的代码被破坏 function Foo Foo prototype bar function console log bar lt missing semicolon function Foo pr
  • 获取被调用的 javascript 文件的查询字符串

    是否可以在调用的 javascript 文件上使用 javascript 获取查询参数 如下所示 in html in file js console log this location query 这是否可能以某种方式实现 或者我必须使用
  • Javascript 进程是否有多个执行线程?

    背景 我正在创建一个 地址簿 类型的应用程序 有很多条目需要加载 一个想法是首先加载一小部分条目 让用户开始 然后将剩余条目排队 优先考虑用户单击的条目 例如 如果他们单击以 X 开头的名称 请先加载这些名称 然后再处理队列的其余部分 这个
  • 判断字符串是否包含有效的javascript代码

    我正在寻找一个C 返回的函数true如果字符串包含有效的 JavaScript 语法 例如 IsValidJavascript alert hello 会回来true but IsValidJavascript alertXXhelloZ
  • 检查用户设备的 GPS 是否开启

    我正在使用 jQuery Mobile 和 PHP 开发一个应用程序 我没有使用 Phonegap 或其他框架 我需要找到用户的geolocation 如果用户设备的 GPS 关闭 那么我无法获取位置 现在我需要查找用户设备的 GPS 是否
  • 使用javascript以编程方式触发iOS safari中的复制菜单?

    我正在尝试实现一种用户友好的方式 将一些文本从文本输入字段复制到 iOS Safari 上的剪贴板 我知道无法在这个平台上以编程方式完成此操作 但我希望能够尽可能地指导用户体验 在 iOS Safari 上 当用户手动突出显示某些文本时 会
  • Firefox Addon 中的 JQuery 导致多个警告

    我在 Firefox 插件中使用 jquery 但我不断收到大量警告消息 如下所示 anonymous function does not always return a value System JS WARNING resource g
  • AngularJS + jQuery 移动

    是否还有其他可能性来设计AngularJS以移动友好的方式应用程序CSS 我正在计划一个移动应用程序 并希望使用 AngularJS 进行逻辑和数据绑定 但我不想自己设计所有内容CSS The AngularJSFAQ说它使用jQuery
  • Angular2:动态同步http请求

    Goal 发出一系列同步 http 请求并能够将它们作为一个可观察流进行订阅 示例 不工作 let query arr test1 test2 test3 function make request query arr if query a
  • 如何知道 .keyup() 是否是字符键(jQuery)

    如何知道 keyup 是否是字符键 jQuery input keyup function if key is a character such as a b A b c 5 3 2 etc not enter key or shift o
  • 从链接打开本地文件夹

    如何通过单击任何链接打开本地文件夹视图 我尝试了很多选择 例如 a href Open folder a or a Open folder a or a Open folder a 解决方案 启动可下载链接 以下内容适用于所有浏览器 但一如
  • ES6 模块范围

    我有代码 lib js var a a export var b b main js console log a a variable is not available in a global scope import b from lib
  • 如何在React中动态分配属性?

    这是一个有两个参数的函数 我要创建的标签的名称 具有以下属性的对象 Using React 我创建一个组件并将该元素渲染到 DOM 问题是我想向元素添加属性 但它不允许循环在元素内设置属性 var Element function elem
  • 如何从 CSS 选择器中提取类名?

    故事 我目前正在构建一个 ESLint 规则 以警告在 CSS 选择器定位器中使用引导布局导向和角度技术类 目前我在字符串方法中使用简单的子字符串 for var i 0 i lt prohibitedClasses length i if
  • Firebase + Node.js:错误:找不到 XMLHttpRequest 兼容性库

    Firebase Node js On iOS 安装的 Node js npm 安装 firebase save 节点测试 js 其中 test js 是一个非常简单的连接到 Firebase 的脚本 var firebase requir
  • javascript - 如何获取对象名称或关联数组索引名称?

    我有一个像这样的 JSON 对象 var list name1 element1 value1 name2 element1 value2 如何提取所有 nameX 字符串值 例如 假设我想将它们连接在一个字符串中输出 例如 name1 n
  • Three.js点击单个粒子

    In this example http jsfiddle net agqq96bq 2 您可以看到 2 个可点击的粒子 但它们都受到点击的影响 另外 我只想检测粒子上的点击 而不将它们过滤出场景 像这儿 if intersects len
  • Vue.js - 当标头中使用 multipart/form-data 时,axios 中的文件上传验证失败

    我正在构建一个 Laravel Vue js SPA 单页应用程序 BootstrapVue https bootstrap vue js org Vee验证 https logaretm github io vee validate gu

随机推荐

  • 冒泡排序_C++

    include
  • Hadoop之CDH安装

    1 离线数据存储及查询环境部署 离线数据的存储与查询主要是以hadoop为中心的技术栈 包括hive hbase hue kylin等 部署hadoop的方式比较流行的主要有三种 1 直接部署Apache Hadoop 即手工部署 需要自己
  • 常见的阵列技术——raid0,1,5

    常见的阵列技术 Raid0 没有容错设计的条带磁盘阵列 数据条带 并行读写 最大数据容量 成本低 速度快 一块的磁盘坏了 数据全部丢失 没有冗余 低可靠性 Raid1 相互镜像 冗余最大 快速恢复 成本高 高可靠性 最多允许一半的磁盘坏 数
  • DB扩展名的数据库文件怎么打开:两种db数据库的打开方式

    两种db数据库的打开方式 现在桌面级的各种管理系统使用的数据库都是比较常见的类型 比如Access数据库 扩展名为mdb xBase类数据库 扩展名为dbf 但有两种扩展名同为db的数据库 分属两个公司的产品 一个是老牌桌面数据库Parad
  • ssd recommended_怎么看SSD还能用多久 固态硬盘寿命检测方法【详解】

    关于固态硬盘和机械硬盘的对比 理论上来说呢 固态硬盘的寿命是不如机械硬盘的 不过实际运用情况下 SSD由于抗震能力强 实际用起来寿命可能比机械硬盘还长 毕竟很多机械硬盘都是高速旋转过程中 受到碰撞导致磁头破坏 硬盘也就坏了 下面分享几种固态
  • [CISCN2021 Quals]upload

    知识点 unicode字符替代 二次渲染绕过 目录结构识别 upload php 中限制了图片的大小 长宽 以及一些字母
  • 机器学习基础(一):平均数中位数众数

    机器学习基础 一 平均数中位数众数 从一组数字中我们可以学到什么 在机器学习 和数学 中 通常存在三中我们感兴趣的值 均值 Mean 平均值 中值 Median 中点值 又称中位数 众数 Mode 最常见的值 例如 我们已经登记了 13 辆
  • 【现代谜题】晚上有四个人要过桥,只有一个手电筒,每次过桥都需要手电筒,每次最多可同时过两个人,其中甲过桥要1分钟,乙要2分钟,丙要5分钟,丁要10分钟。求最短的过桥时间。

    文章目录 题目 一 思路 方法一 方法二 二 代码 测试数据 题目 晚上有四个人要过桥 只有一个手电筒 每次过桥都需要手电筒 每次最多可同时过两个人 其中甲过桥要1分钟 乙要2分钟 丙要5分钟 丁要10分钟 求最短的过桥时间 一 思路 首先
  • R语言基本数据结构

    R语言系列文章目录 文章目录 R语言系列文章目录 前言 一 向量 二 矩阵 三 数组 四 列表 五 数据框 前言 一篇技术博客的写作不可能面面俱到 那这就意味着必须抛弃一些内容 在R语言的书里对于R的基础知识的讲解很容易找到 因此 这一R语
  • qt文件操作

    第一步 手动获取文件路径 include
  • 动态代理简单实现

    动态代理简单实现 文章目录 动态代理简单实现 一 反射 二 反射机制提供的功能 1 相关API 2 Class类的理解 4 创建类的对象的方式 5 Class实例可以是那些结构的说明 三 类的加载过程 四 动态代理 反射的动态性 一 反射的
  • LeetCode:设计循环队列

    题目链接 622 设计循环队列 力扣 Leetcode https leetcode cn problems design circular queue 还是老套路二话不说 先上代码 typedef struct int front int
  • win11下经典jdk8的安装与环境变量的配置(一看就懂,超级详细!!!)

    1 安装jdk8 由于Oracle官网需要注册账号才能下载 不想注册的同学们可以直接通过下面的地址下载 因为新的jdk版本变化不是很大 所以初学者用1 8版本就足够啦 链接 https pan baidu com s 1HjoXGTlaPw
  • 函数栈帧的创建和销毁

    全文目录 前言 寄存器 main函数的调用 调用main函数的函数 main函数的栈帧如何开辟的 push 保存调用方的 ebp move 维护新开栈帧的栈底 sub 维护新开栈帧的栈顶 三连 push 添加栈帧的信息的变量 lea 存放栈
  • spring中的quartz调度问题

    1 SchedulerFactoryBean会自动启动 当在spring文件中定义了多个SchedulerFactoryBean实例时 一定要小心 因为这些ScheduleFactoryBean自从load进程序里 就会自动启动 如果要手动
  • Grafana

    一 Grafana 数据可视化 1 下载各种环境以及版本地址 https grafana com grafana download platform windows 2 windows下的安装并运行 https www jianshu co
  • Leetcode2488-统计中位数为 K 的子数组

    数组中的元素只有三种 等于k的 大于k 小于k的 首先找到k在数组中的位置p 分别统计p左侧和右侧的每个位置有多少个元素大于或小于k 假设向左开始记录 首先记c 0 遇到大于k的元素则c 否则c 表示这个位置到p之间净有c个元素大于k 同理
  • 科学计算库Numpy

    一 创建Numpy数组 创建一个一维数组 data1 np array 1 2 4 创建一个二维数组 data2 np array 1 2 3 4 5 6 1 2 3 创造元素值都是0的数组 np zeros 3 4 创建元素值全是1的数组
  • ai作文批改_好未来:AI智能批改中英文作文为老师“减负”

    开篇诗词点题 结尾升华主题 非常赞 细节上 人物描写方法多样 人物的性格特点描绘细致 整体上 内容凸显文章主题 语言新颖清爽 读来令人如沐春风 这是一份语文作文的批改反馈 不过 这份生动详细的批改反馈并不普通 它是利用好未来自主研发的 中英
  • vue动态渲染ref,获取this.$refs.xxx.style为undefined获取循环元素中的style

    正常情况下通过this refs xxx style获取是没问题的 本文遇到的是要获取循环列表中某一元素 并改变其样式 设置ref在v for列表上 直接获取this r e f s n a