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 相关文章推荐
extjs grid设置某列背景颜色和字体颜色的方法
Sep 03 Javascript
js给页面加style无效果的解决方法
Jan 20 Javascript
使用javascript提交form表单方法汇总
Jun 25 Javascript
详解 javascript中offsetleft属性的用法
Nov 11 Javascript
详解JavaScript的AngularJS框架中的表达式与指令
Mar 05 Javascript
创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件
Jun 02 Javascript
JS验证字符串功能
Feb 22 Javascript
Angular.js自定义指令学习笔记实例
Feb 24 Javascript
分享ES6的7个实用技巧
Jan 18 Javascript
微信小程序中this.data与this.setData的区别详解
Sep 17 Javascript
vue+vuex+json-seiver实现数据展示+分页功能
Apr 11 Javascript
解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题
Dec 04 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
咖啡知识 咖啡养豆要养多久 排气又是什么
2021/03/06 新手入门
linux php mysql数据库备份实现代码
2009/03/10 PHP
PHP编程中的常见漏洞和代码实例
2014/08/06 PHP
Linux平台PHP5.4设置FPM线程数量的方法
2016/11/09 PHP
PHP获取IP地址所在地信息的实例(使用纯真IP数据库qqwry.dat)
2016/11/15 PHP
PHP中CheckBox多选框上传失败的代码写法
2017/02/13 PHP
php实现数字补零的方法总结
2018/09/12 PHP
php实现微信企业转账功能
2018/10/02 PHP
JavaScript判断访问的来源是手机还是电脑,用的哪种浏览器
2013/12/12 Javascript
js使用心得分享
2015/01/13 Javascript
JavaScript中数组继承的简单示例
2015/07/29 Javascript
jQuery实现鼠标经过事件的延时处理效果
2020/08/20 Javascript
几句话带你理解JS中的this、闭包、原型链
2016/09/26 Javascript
JavaScript实现图片懒加载(Lazyload)
2016/11/28 Javascript
微信小程序 scroll-view隐藏滚动条详解
2017/01/16 Javascript
深入探究AngularJs之$scope对象(作用域)
2017/07/20 Javascript
基于elementUI使用v-model实现经纬度输入的vue组件
2019/05/12 Javascript
javascript事件循环event loop的简单模型解释与应用分析
2020/03/14 Javascript
微信小程序实现简单文字跑马灯
2020/05/26 Javascript
[39:18]完美世界DOTA2联赛PWL S3 Forest vs LBZS 第二场 12.17
2020/12/19 DOTA
python文件操作整理汇总
2014/10/21 Python
Python中input与raw_input 之间的比较
2017/08/20 Python
Python查找第n个子串的技巧分享
2018/06/27 Python
Python实现决策树并且使用Graphviz可视化的例子
2019/08/09 Python
python 一篇文章搞懂装饰器所有用法(建议收藏)
2019/08/23 Python
基于Python爬取素材网站音频文件
2020/10/21 Python
python时间time模块处理大全
2020/10/25 Python
Canvas 文本填充线性渐变的使用详解
2020/06/22 HTML / CSS
请用用Java代码写一个堆栈
2012/01/26 面试题
初一体育教学反思
2014/01/29 职场文书
食品安全演讲稿
2014/09/01 职场文书
离婚协议书范本2014
2014/10/27 职场文书
义卖募捐活动总结
2015/05/09 职场文书
2016入党积极分子党课培训心得体会
2016/01/06 职场文书
2019中小学生安全过暑期倡议书
2019/06/24 职场文书
Requests什么的通通爬不了的Python超强反爬虫方案!
2021/05/20 Python