vue中使用dom的contains选中元素的坑

最新推荐文章于 2025-03-11 22:17:28 发布

原创最新推荐文章于 2025-03-11 22:17:28 发布 · 419 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

在Vue中使用v-if和v-else进行条件渲染时，可能会遇到元素匹配失败的问题，因为Vue在重新渲染时会给元素添加独立的data-v-hash，影响引用。为了解决这个问题，建议使用v-show或者通过修改样式来控制元素的显示与隐藏，以避免因DOM变动导致的$refs匹配不一致。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

不能使用v-if和v-else进行元素匹配，否则在使用this.$refs.xxx获取元素会出现匹配不上的情况，vue在重新渲染元素的时候会打一个独立data-v-hash值，会导致匹配不上，所以只能使用v-show或者设置其他样式控制

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

binquan_liang

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

Cesium 2 ，在Vue项目中使用Cesium加载规定区域，实现高亮效果

NorthCity Smile的博客（NcSmile，博主域名：https://ncmile.blog.youkuaiyun.com）

07-09

1854

⭐我们都知道Cesium 是一个强大的开源 JavaScript 库，用于在网页上创建交互式的3D地球和2D地图。它支持多种数据格式和来源，允许开发者加载各种类型的空间信息，包括影像、地形、矢量数据等。这里分享记录，如何将Cesium在本地运行，并加载规定区域高亮效果。并且让项目在本地运行，这样我们引用和查看Cesium的文件和API，会更加方便。

Vue学习手册04 Vue选项式API

源滚滚编程

12-25

465

在我们的应用程序的主页上，打开浏览器的Developer Tools，转到Vue选项卡，选择Inspector面板中显示的Root组件。在Options API中，模板接受一个字符串，该字符串包含有效的基于html的代码，并表示组件的UI布局。状态处理：包括data()，它返回组件的本地数据状态、computed、方法和watch，以启用对特定本地数据的观察，以及传入数据的props。在前面的代码中，我们声明了本地数据属性title，并使用{{title}}表达式将其值注入到App的模板中。

参与评论您还未登录，请先登录后发表或查看评论

Java和vue的包含数组组件contains、includes

m0_74608954的博客

09-12

854

如果这个数组的任意一个数组等于initMap.get(“asset_type_id”).toString())

vue中使用contains判断点击事件，点击超出自身区域隐藏自己

风的轻扬

07-14

4950

注意：ref方式获取的和js原生方式获取的dom类型不同，用原生的js获取dom方式代替ref方式，这样才能判断是否属于自身区域的。 mounted() { // 监听，除了点击自己，点击其他地方将自身隐藏 document.addEventListener("click", e => { const contextMenu = document.getElementById("contextMenu"); if (contextMenu) { ...

【Vue】Vue学习笔记——自定义指令&&组件

lht964249279的博客

01-23

1565

Vue学习笔记

vue高级知识点集合

gongliming_qd的博客

02-08

764

1 . Class绑定在不同环境下的用法 class绑定分为两种，一种是对象, 一种是数组。如下情况： // Object :class="{ active: isActive, 'text-danger': hasError }" data: { isActive: true, hasError: false } // Array :class="[activeClass, errorClass]" data: { activeClass: 'active', errorClas

Node.contains() 报错， vue中监听点击事件，除了点击自己，点击其他地方将自身隐藏

ddx2019的博客

07-10

3155

mounted() { // 监听，除了点击自己，点击其他地方将自身隐藏 document.addEventListener("click", e => { console.log(e.target); // if (e.target !== this.$refs.contextMenuBox) { // this.rightFlag = false; // } if (this.$refs.contextMenuBo..

vue 点击其他区域关闭自定义div操作

10-15

这里，`$el`代表Vue实例对应的DOM元素。当点击事件发生时，检查事件是否发生在当前Vue实例的元素内。如果不是，则关闭自定义div。 ### 补充知识：全选和全不选操作在开发过程中，我们常常需要实现复选框的全选...

vue点击页面空白处实现保存功能

10-16

在Vue中，我们通常不直接操作DOM进行事件监听，而是利用Vue的事件机制。不过在这个场景下，因为需要监听整个页面的点击事件，所以我们可以使用原生的`addEventListener`和`removeEventListener`方法。 ```...

vue在一篇文章中获取鼠标选中文字和该文字所在的该句话

最新发布

04-03

在 Vue.js 开发中，捕获用户选中的文本并提取其所在句子的功能可以通过监听事件、操作 DOM 和自然语言处理技术结合实现。下面是详细介绍及其实现思路。 --- ### 需求分析目标是从一篇文章内容中获取用户当前选中...

vue里ref ($refs)用法

四月

06-16

1304

https://www.cnblogs.com/goloving/p/9404099.html

vue-cli脚手架

好气嗷，但仍要保持微笑!

07-30

802

（一）全局安装vue-lic npm install -g vue-cli （二）初始化项目名 vue init webpack myapps 可能出现的错误： Sorry, name can no longer contain capital letters.（项目名称不能包含大写字母。）（三）.三Y一N （四）进入项目文件...

Contain的使用

weixin_34259232的博客

11-16

592

一直以为即使是string的列表，仍旧会找到"11"中的1从而得出True,True,True的结论原来只有string才会出现而对于列表，Contain将匹配的是全值

前端vue开发之----vue组件详解(一)

不二青春

05-12

706

实际应用项目：http://github.crmeb.net/u/long 主要内容: 1. 组件的基本使用 2. 全局组件和局部组件 3. 父组件和子组件 4. 组件语法糖的写法 5. 组件data关联的写法 6. 父子组件的通信组件系统是 Vue 的一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。几乎任意类型的应用界面都可以抽象为一个组件树：例如上面页面, 页面整体分为三个部分. 我们可以将每一个部分设计为一个组件. 然后将...

vue+vant 监听移动端页面分辨率来展示图片大小（确定背景图片的background-size使用cover还是contain）

DcTbnk的博客

04-15

982

background-size：cover/contain cover是用于图片小于容器，把图片等比例铺满，这个会裁剪图片。 container是用于图片大于容器，把图片等比例缩小，这个会显示完整图片但不会铺满。 mounted () { // 初始化背景图 this.$nextTick(() => { // console.log('打印photo的值', window.ApiConfig.systemFlag) // 首先先拿到配置文件中的系统标识进行sw

Vue前端项目报Component template should contain exactly one root element错误

xuguoxing123的博客

01-27

1537

最近接触到前后端分离项目的开发，在编写Vue前端项目时出现以下错误：Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead。这个错误对于新手来说比较常见，从英文翻译来看，就是：“组件模板应该只包含一个根标

vue中判断数据是否在数组中_结构化数据中的从属判断问题

weixin_39732716的博客

12-08

1797

【摘要】从数据表中选出数据时，有时需要判断成员是否从属于某一个集合。例如从房价表中选出重要城市的房价信息，从销售表中选出 VIP 客户的销售记录等等。如何简便快捷的处理结构化数据中的从属判断问题，这里为你全程解析，并提供 esProc 示例代码。结构化数据中的从属判断问题1. 集合包含性检测在一个表中，根据集合的包含性判断查找记录。【例 1】在员工表中，统计一线城市各部门的平均工资。部分数据如...

Vue的基础使用

weixin_56606482的博客

03-11

1078

响应式数据是指当数据发生变化时，系统能够自动更新依赖该数据的视图或逻辑，而无需开发者手动操作。这种机制通过数据绑定技术，实现了数据驱动视图的自动同步。例如，当你在前端框架中修改一个变量时，页面中用到该变量的地方会自动刷新，无需手动更新 DOM。ref和reactive特性**ref****reactive**适用类型基本类型（stringnumberboolean）或对象/数组的引用。对象或数组（直接处理复杂数据结构）。响应式包装方式将值包装为的响应式对象，需通过.value访问。

Vue子组件的显示与隐藏

疯猫

07-30

4880

文章目录 Vue子组件的显示与隐藏第一步使用v-show 1.1 父组件 1.2 子组件 2 第二步父子组件传参 2.1 父组件 2.2 子组件 Vue子组件的显示与隐藏在使用Vue开发前端页面的过程中，经常都会遇到需要在父组件中控制子组件的显示/隐藏，比如弹出窗口。最简单的方法就是：通过父子组件间的数据双向绑定来实现。这种方法虽然简单，但只是针对于父与子组件这种关系来实现的。如果是子组件与子组件之间，可以考虑使用Vuex来完成。另外我自己.