vue获取DOM元素并设置属性的两种实现方法


Posted in Javascript onSeptember 30, 2017

这里我想到了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元素并设置属性的两种实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
菜鸟javascript基础资料整理2
Dec 06 Javascript
jquery右下角弹出提示框示例代码
Oct 08 Javascript
基于JavaScript实现高德地图和百度地图提取行政区边界经纬度坐标
Jan 22 Javascript
JavaScript正则表达式实例详解
Oct 16 Javascript
JS匿名函数类生成方式实例分析
Nov 26 Javascript
jquery DataTable实现前后台动态分页
Jun 17 jQuery
JavaScript类数组对象转换为数组对象的方法实例分析
Jul 24 Javascript
echarts实现地图定时切换散点与多图表级联联动详解
Aug 07 Javascript
javascript中call,apply,callee,caller用法实例分析
Jul 24 Javascript
聊聊Vue中provide/inject的应用详解
Nov 10 Javascript
Vue axios 跨域请求无法带上cookie的解决
Sep 08 Javascript
vue二选一tab栏切换新做法实现
Jan 19 Vue.js
jQuery完成表单验证的实例代码(纯代码)
Sep 30 #jQuery
JS设计模式之数据访问对象模式的实例讲解
Sep 30 #Javascript
浅谈vue的iview列表table render函数设置DOM属性值的方法
Sep 30 #Javascript
iview给radio按钮组件加点击事件的实例
Sep 30 #Javascript
浅谈react-native热更新react-native-pushy集成遇到的问题
Sep 30 #Javascript
jquery之基本选择器practice(实例讲解)
Sep 30 #jQuery
iframe高度自适应及隐藏滚动条的实例详解
Sep 29 #Javascript
You might like
php制作动态随机验证码
2015/02/12 PHP
PHP读取文本文件并逐行输出该行使用最多的字符与对应次数的方法
2016/11/25 PHP
php操作mongodb封装类与用法实例
2018/09/01 PHP
被jQuery折腾得半死,揭秘为何jQuery为何在IE/Firefox下均无法使用
2010/01/22 Javascript
JQuery Dialog的内存泄露问题解决方法
2010/06/18 Javascript
javascript中length属性的探索
2011/07/31 Javascript
JS验证邮件地址格式方法小结
2015/12/01 Javascript
JavaScript实现邮箱地址自动匹配功能代码
2016/11/28 Javascript
JS按钮闪烁功能的实现代码
2017/07/21 Javascript
解决Angular.js中使用Swiper插件不能滑动的问题
2018/02/26 Javascript
JS简单实现动态添加HTML标记的方法示例
2018/04/08 Javascript
实例分析Array.from(arr)与[...arr]到底有何不同
2019/04/09 Javascript
Angular Excel 导入与导出的实现代码
2019/04/17 Javascript
Nodejs异步流程框架async的方法
2019/06/07 NodeJs
html-webpack-plugin修改页面的title的方法
2020/06/18 Javascript
[59:00]OG vs TNC 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Python编程中实现迭代器的一些技巧小结
2016/06/21 Python
利用python求解物理学中的双弹簧质能系统详解
2017/09/29 Python
python SSH模块登录,远程机执行shell命令实例解析
2018/01/12 Python
Python反射的用法实例分析
2018/02/11 Python
python2与python3爬虫中get与post对比解析
2019/09/18 Python
Python新手学习raise用法
2020/06/03 Python
解决Windows下python和pip命令无法使用的问题
2020/08/31 Python
pycharm 使用tab跳出正在编辑的括号(){}{}等问题
2021/02/26 Python
SmartBuyGlasses丹麦:网上购买名牌太阳镜、眼镜和隐形眼镜
2016/10/01 全球购物
H&M旗下高端女装品牌:& Other Stories
2018/05/07 全球购物
市场营销管理毕业生自荐信
2014/03/03 职场文书
毕业典礼演讲稿
2014/05/13 职场文书
材料专业大学毕业生自荐书
2014/07/02 职场文书
超市理货员岗位职责
2014/07/04 职场文书
新生入学欢迎词
2015/01/26 职场文书
电影建国大业观后感
2015/06/01 职场文书
任命书格式模板
2015/09/22 职场文书
《小小的船》教学反思
2016/02/18 职场文书
关于HTML编码导致的乱码问题
2021/09/04 HTML / CSS
python实现Nao机器人的单目测距
2021/09/04 Python