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 ...
随机推荐
- fiddler常用操作之断点
fiddler常用操作断点 标签(空格分隔): fiddler断点 一.断点: 1.为什么要打断点呢? 比如一个购买的金额输入框,输入框前端做了限制100-1000,那么我们测试的时候,需要测试小于1 ...
- web.xml中<security-constraint>和四种认证类型
https://blog.csdn.net/lisheng19870305/article/details/40819481 sztc开发中http请求一直发送后无响应,通过soapui定位异常信息为 ...
- Mysql 数据类型(基础5)
Mysql 常用的4种数据类型: 整型 int. 浮点型 double. 日期类型 datetime .字符型( varchar char text ) #创建一张表 mysql> create ...
- Spring启动异常: cvc-elt.1: Cannot find the declaration of element 'beans'(转)
Spring启动异常: cvc-elt.1: Cannot find the declaration of element 'beans' 2008-09-07 22:41 今天把在线聊天室代码改了下 ...
- java集合: LinkedList源码浅析
LinkedList 数据结构是双向链表,插入删除比较方便.LinkedList 是线程不安全的,允许元素为null . 构造函数: 构造函数是空的. /** * Constructs an emp ...
- CSS 变量教程
一.变量的声明 声明变量的时候,变量名前面要加两根连词线(--). body { --foo: #7F583F; --bar: #F7EFD2; } 上面代码中,body选择器里面声明了两个变量:-- ...
- Python3 round() 函数
Python3 round() 函数 Python3 数字 描述 round() 方法返回浮点数x的四舍五入值. 语法 以下是 round() 方法的语法: round( x [, n] ) 参数 ...
- 基础DP(初级版)
本文主要内容为基础DP,内容来源为<算法导论>,总结不易,转载请注明出处. 后续会更新出kuanbin关于基础DP的题目...... 动态规划: 动态规划用于子问题重叠的情况,即不同的子问 ...
- .linearDrag on rigidbody / rigidbody2D in code?
it's rigidbody.drag not .linearDrag 这几天在做一个弹球的游戏,发现小球落下后不会自动停,测试后发现线性阻尼增加后可以 于是加了个触发器不停增加线性阻尼值 priva ...
- SQLite4Unity3d
What's this? When I started with Unity3d development I needed to use SQLite in my project and it was ...