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 ...
随机推荐
- Spread Syntax
[Spread Syntax] The spread syntax allows an expression to be expanded in places where multiple argum ...
- sql语句中的不等于 <>
建议最好使用 <> 表示不等于 原因:!=在sql2000不表示不等于
- mybatis forEach使用
1.集合的使用 <select id="getCitysByKeys" resultMap="city" parameterType="Arra ...
- CentOS 下部署weblogic12.1.1.0
1.软件包 JDK 1.7.0 Weblogic 12.1.1.0 2.JDK安装完配置环境变量 export JAVA_HOME=/usr/java/jdk1.7.0_79 export CLASS ...
- Camera插件推荐,解锁电影大师级视角控制
相机在游戏中的重要性是不言而喻的,尤其是一些MMORPG或FPS等类型的游戏,相机不仅需要跟随游戏主角进行移动,可能还要随时准备切换焦点,这就要求开发者将游戏相机管理得井井有条,能顺应游戏中可能瞬息发 ...
- [LeetCode_96] Unique Binary Search Trees
题目链接 https://leetcode.com/problems/unique-binary-search-trees/ 题意 计算给定节点数的BST有多少种 思路 递归 相关知识 二叉搜索树(B ...
- 联机分析处理ROLAP、MOLAP和HOLAP区别(转)
OLAP(on-Line Analysis Processing)是使分析人员.管理人员或执行人员能够从多角度对信息进行快速.一致.交互地存取,从而获得对数据的更深入了解的一类软件技术.OLAP的目标 ...
- 《基于Nginx的中间件架构》学习笔记---3.nginx的目录分析
一.目录分析 用yum的方式进行安装实质上装的都是一个个的rpm包,对于linux系统rpm包管理器,我们使用命令rpm -ql 服务名称 就可以列出我们已经安装的服务所对应安装的每一个文件所在的目 ...
- 使用python读写CSV文件
# -*- coding:UTF-8 -*- __autor__ = 'zhouli' __date__ = '2018/10/25 21:14' import csv with open('resu ...
- PHP百杂
PHP实时生成并下载超大数据量的EXCEL文件 PHP错误和异常 PHP异常处理机制 我所理解的php缓冲机制及嵌套级别 $nick = 'test'; //简化输出 echo $nick?:''