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 键盘keyCode键码值表
Dec 24 Javascript
Javascript JSQL,SQL无处不在,
May 05 Javascript
js ondocumentready onmouseover onclick onmouseout 样式
Jul 22 Javascript
利用Keydown事件阻止用户输入实现代码
Mar 11 Javascript
javascript实现禁止复制网页内容
Dec 16 Javascript
每天一篇javascript学习小结(Function对象)
Nov 16 Javascript
本地Bootstrap文件字体图标引入却无法显示问题的解决方法
Apr 18 Javascript
react性能优化达到最大化的方法 immutable.js使用的必要性
Mar 09 Javascript
npm全局模块卸载及默认安装目录修改方法
May 15 Javascript
Vue不能观察到数组length的变化
Jun 08 Javascript
微信小程序获取位置展示地图并标注信息的实例代码
Sep 01 Javascript
JavaScript实现模态对话框实例
Jan 13 Javascript
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
德生S2000收音机更换“钕铁硼”全频扬声器
2021/03/02 无线电
PHP+MySQL5.0中文乱码解决方法
2006/11/20 PHP
phpmyadmin 3.4 空密码登录的实现方法
2010/05/29 PHP
php设置页面超时时间解决方法
2015/09/22 PHP
php封装db类连接sqlite3数据库的方法实例
2017/12/19 PHP
PHP创建自己的Composer包方法
2018/04/09 PHP
javascript权威指南 学习笔记之变量作用域分享
2011/09/28 Javascript
JS 精确统计网站访问量的实例代码
2013/07/05 Javascript
Jquery增加鼠标中间功能mousewheel的实例代码
2013/09/05 Javascript
关于JS中prototype的理解
2015/09/07 Javascript
Bootstrap每天必学之面板
2015/11/30 Javascript
Bootstrap实现响应式导航栏效果
2015/12/28 Javascript
BootStrap 智能表单实战系列(二)BootStrap支持的类型简介
2016/06/13 Javascript
NodeJS远程代码执行
2016/08/28 NodeJs
基于JS实现回到页面顶部的五种写法(从实现到增强)
2016/09/03 Javascript
require.js+vue开发微信上传图片组件
2016/10/27 Javascript
jquery.guide.js新版上线操作向导镂空提示jQuery插件(推荐)
2017/05/20 jQuery
JavaScript 程序错误Cannot use 'in' operator to search的解决方法
2017/07/10 Javascript
JavaScript实现短信倒计时60s
2017/10/09 Javascript
微信小程序项目实践之九宫格实现及item跳转功能
2018/07/19 Javascript
详解一次Vue低版本安卓白屏问题的解决过程
2019/05/30 Javascript
Echarts实现多条折线可拖拽效果
2019/12/19 Javascript
js中forEach,for in,for of循环的用法示例小结
2020/03/14 Javascript
python中pygame针对游戏窗口的显示方法实例分析(附源码)
2015/11/11 Python
python+numpy+matplotalib实现梯度下降法
2018/08/31 Python
史泰博(Staples)中国官方网站:办公用品一站式采购
2016/09/05 全球购物
全球性的在线婚纱礼服工厂:27dress.com
2019/03/21 全球购物
俄罗斯皮肤健康中心:Pharmacosmetica.ru
2020/02/22 全球购物
澳大利亚Rockwear官网:女子瑜伽、健身和运动服
2021/01/26 全球购物
android面试问题与答案
2016/12/27 面试题
干部考核评语
2014/04/29 职场文书
食品安全汇报材料
2014/08/18 职场文书
法英专业大学生职业生涯规划书范文
2014/09/22 职场文书
2015年社区教育工作总结
2015/05/13 职场文书
党支部对转正的意见
2015/06/02 职场文书
男生贾里读书笔记
2015/06/30 职场文书