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 用函数语句和表达式定义函数的区别详解
Jan 06 Javascript
javascript实现类似百度分享功能的方法
Jul 27 Javascript
js操作cookie保存浏览记录的方法
Dec 25 Javascript
AngularJS 模型详细介绍及实例代码
Jul 27 Javascript
浅谈jquery上下滑动的注意事项
Oct 13 Javascript
PHP实现本地图片上传和验证功能
Feb 27 Javascript
Vue.js结合bootstrap实现分页控件
Mar 10 Javascript
angular5 httpclient的示例实战
Mar 12 Javascript
webuploader实现上传图片到服务器功能
Aug 16 Javascript
vue路由跳转传参数的方法
May 06 Javascript
JS实现使用POST方式发送请求
Aug 30 Javascript
在vue中使用el-tab-pane v-show/v-if无效的解决
Aug 03 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
PHP Zip压缩 在线对文件进行压缩的函数
2010/05/26 PHP
使用bcompiler对PHP文件进行加密的代码
2010/08/29 PHP
PHP框架Laravel学习心得体会
2015/10/28 PHP
symfony2.4的twig中date用法分析
2016/03/18 PHP
PHP使用星号隐藏用户名,手机和邮箱的实现方法
2016/09/22 PHP
php进程(线程)通信基础之System V共享内存简单实例分析
2019/11/09 PHP
JS类库Bindows1.3中的内存释放方式分析
2007/03/08 Javascript
支持ie与FireFox的剪切板操作代码
2009/09/28 Javascript
Jquery之美中不足小结
2011/02/16 Javascript
Jquery带搜索框的下拉菜单
2013/05/06 Javascript
js 限制input只能输入数字、字母和汉字等等
2013/12/18 Javascript
使用js实现一个可编辑的select下拉列表
2014/02/20 Javascript
分享bootstrap学习笔记心得(组件及其属性)
2017/01/11 Javascript
js 用于检测类数组对象的函数方法
2017/05/02 Javascript
angularjs下拉框空白的解决办法
2017/06/20 Javascript
vue页面加载闪烁问题的解决方法
2018/03/28 Javascript
jQuery实现的简单获取索引功能示例
2018/06/04 jQuery
vue elementui el-form rules动态验证的实例代码详解
2019/05/23 Javascript
JS错误处理与调试操作实例分析
2020/04/13 Javascript
python 接口_从协议到抽象基类详解
2017/08/24 Python
python利用OpenCV2实现人脸检测
2020/04/16 Python
Python实现JSON反序列化类对象的示例
2018/01/31 Python
解决pycharm上的jupyter notebook端口被占用问题
2019/12/17 Python
Python SMTP发送电子邮件的示例
2020/09/23 Python
Python3.9.0 a1安装pygame出错解决全过程(小结)
2021/02/02 Python
CSS3实现超慢速移动动画效果非常流畅无卡顿
2014/06/15 HTML / CSS
CSS3实现复选框动画特效示例代码
2016/09/27 HTML / CSS
迪卡侬荷兰官网:Decathlon荷兰
2017/10/29 全球购物
西班牙电子产品购物网站:Electronicamente
2018/07/26 全球购物
犹他州最古老的体育用品公司:Al’s
2020/12/18 全球购物
ajax是什么及其工作原理
2012/02/08 面试题
妇产科护士自我鉴定
2013/10/15 职场文书
大学校园毕业自我鉴定
2014/01/15 职场文书
2015年医院药剂科工作总结
2015/05/04 职场文书
入党申请书怎么写?
2019/06/11 职场文书
Nginx虚拟主机的配置步骤过程全解
2022/03/31 Servers