vue获取DOM元素并设置属性
这里我想到了2个方法:
方法一:
直接给相应的元素加id,然后再document.getElementById("id");获取,然后设置相应属性或样式
方法二:
使用ref,给相应的元素加ref=“name” 然后再this.$refs.name获取到该元素
注意:在获取相应元素之前,必须在mount钩子进行挂载,否则获取到的值为空,
如果是给子组件加id并修改自定义属性,则直接会加载改子组件对应的外层div上,并不会改变该子组件原本的自定义属性的值
如果给子组件加ref,然后获取到该DOM元素之后改变相应的自定义属性的值,vue会报错:
Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "title"
vue获取DOM元素并设置属性的更多相关文章
- vue获取dom元素内容
通过ref来获取dom元素 在vue官网上对ref的解释 ref 被用来给元素或子组件注册引用信息.引用信息将会注册在父组件的 $refs 对象上.如果在普通的 DOM 元素上使用,引用指向的就是 D ...
- vue获取dom元素注意问题
mounted(){ setTimeout(()=>{ this.contentToggle(); },1000) }, methods:{ contentToggle(){ console.l ...
- vue获取dom元素高度的方法
获取高度: <div ref="自定义名称" > </div>要在钩子mounted里面dom结构生成后去获取dom的高度,宽度,修改样式等操作!!! mo ...
- Vue获取DOM元素的属性值
项目中需要做一个小弹层,如下图: 我需要知道点击元素距离顶部的值,再计算弹层的top值,如下图: 在vue中如何获取到DOM元素距离窗口顶部的值呢? 1.通过$event获取 html: <di ...
- Vue 获取DOM元素ref
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue获取dom元素
<li @click='获取li标签' :ref="center-li" id="center-li" > =====我是li标 ...
- Vue 获取dom元素之 ref 和 $refs 详解
一.$refs 一个对象,持有ref注册过的所有元素或子组件.(注册过的 ref 的集合) 二.ref 被用来给元素或子组件注册引用信息.若用在dom元素上,引用指向的就是dom元素:若用在子组件上, ...
- Vue获取DOM元素样式 && 样式更改
在 vue 中用 document 获取 dom 节点进行节点样式更改的时候有可能会出现 'style' is not definde的错误, 这时候可以在 mounted 里用 $refs 来获取样 ...
- jQuery捕获-获取DOM元素内容和属性
一.获取内容 1.text()-设置或返回所选元素的文本内容 2.html()-设置或返回所选元素的内容(包括HTML标记) 3.val()-设置或 返回表单字段的值 $(document).read ...
随机推荐
- 1.3.7、CDH 搭建Hadoop在安装之前(端口---第三方组件使用的端口)
第三方组件使用的端口 在下表中,每个端口的“ 访问要求”列通常是“内部”或“外部”.在此上下文中,“内部”表示端口仅用于组件之间的通信; “外部”表示该端口可用于内部或外部通信. Component ...
- w3af的使用
编解码工具 配置身份 基本身份认证 明文用base64编码 NTML认证方式,微软特有的加密方式 form表单身份认证 这样基于表单的认证就配置好了 基于cookie认证 点击后面的感叹号,它会有co ...
- python -- 初始函数 函数的定义,函数的返回值以及函数的参数
1.什么是函数,函数的定义及语法 2.函数的返回值 3.函数的参数 一.函数的定义及语法 函数的定义:定义了一个动作或者功能,是对功能的封装 语法: def 函数名( 形参列表 ): ...
- TOJ 3151: H1N1's Problem(欧拉降幂)
传送门:http://acm.tzc.edu.cn/acmhome/problemdetail.do?&method=showdetail&id=3151 时间限制(普通/Java): ...
- shape 图形
主要属性: <?xml version="1.0"encoding="utf-8"?><shape > <corners /> ...
- rdlc报表的导出及预览时表头
感谢各路大神的博客,总结rdlc报表中目前用到的知识,积累. 一.rdlc报表PDF打印出现空白页 1.先至Report.rdlc報表設計的頁面,選擇功能表上的[報表]->[報表屬性],在[配置 ...
- 【Android端 adb相关】adb相关总结
一.什么是adb? adb的全称是:Android Debug Bridge,adb命令的构成是三部分,分别是:服务器.客户端.后台程序: (1)客户端:一个在PC上运行的客户端.可以通过shell端 ...
- Sangfor_AC用户不在线但在“在线用户管理”里有显示
现象:用户实际不在线,但是在“在线用户管理”里有看到,而且在线时间很长. 分析:用户通过IP上线以后,只要IP地址在线或者下线时间不超过“无流量自动注销的时间”,那么就会显示到“在线用户管理”里. 而 ...
- 项目总结07:JS图片的上传预览和表单提交(FileReader()方法)
JS图片的上传预览和表单提交(FileReader()方法) 一开始没有搞明白下面这块代码的,今天有时间简单整理下 核心点:FileReader()方法 以下是代码(以JSP文件为例) <!DO ...
- linux 备忘录
1. ps aux|grep 程序 -------->查看当前程序是否运行 ps aux|grep nginx 2. tar -zxvf 压缩包 ---------> 解压缩 tar -z ...