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 指导方针
Apr 05 Javascript
javascript中最常用的继承模式 组合继承
Aug 12 Javascript
javascript创建数组之联合数组的使用方法示例
Dec 26 Javascript
php常见的页面跳转方法汇总
Apr 15 Javascript
jQuery中 attr() 方法使用小结
May 03 Javascript
javascript中Date对象应用之简易日历实现
Jul 12 Javascript
js实现点击图片自动提交action的简单方法
Oct 16 Javascript
JavaScript递归操作实例浅析
Oct 31 Javascript
JavaScript中清空数组的方法总结
Dec 02 Javascript
JS如何实现在页面上快速定位(锚点跳转问题)
Aug 14 Javascript
详解vue-router 初始化时做了什么
Jun 11 Javascript
详解vue中v-for的key唯一性
May 15 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实现获取及设置用户访问页面语言类
2014/09/24 PHP
CI框架给视图添加动态数据
2014/12/01 PHP
php使用include 和require引入文件的区别
2017/02/16 PHP
TP(thinkPHP)框架多层控制器和多级控制器的使用示例
2018/06/13 PHP
thinkphp5.1框架模板赋值与变量输出示例
2020/05/25 PHP
MooTools 1.2介绍
2009/09/14 Javascript
jQuery 瀑布流 浮动布局(一)(延迟AJAX加载图片)
2012/05/23 Javascript
5个JavaScript经典面试题
2014/10/13 Javascript
jquery处理页面弹出层查询数据等待操作实例
2015/03/25 Javascript
浅谈jQuery构造函数分析
2015/05/11 Javascript
JavaScript实现快速排序的方法
2015/07/31 Javascript
浅谈js中调用函数时加不加括号的问题
2016/07/28 Javascript
基于JavaScript实现本地图片预览
2017/02/08 Javascript
jquery 仿锚点跳转到页面指定位置的实例
2017/02/14 Javascript
详解使用vuex进行菜单管理
2017/12/21 Javascript
JavaScript实现淘宝京东6位数字支付密码效果
2018/08/18 Javascript
JS使用队列对数组排列,基数排序算法示例
2019/03/02 Javascript
vue基本使用--refs获取组件或元素的实例
2019/11/07 Javascript
微信小程序开发(一):服务器获取数据列表渲染操作示例
2020/06/01 Javascript
vue 监听 Treeselect 选择项的改变操作
2020/08/31 Javascript
python实现爬虫统计学校BBS男女比例(一)
2015/12/31 Python
Python学习思维导图(必看篇)
2017/06/26 Python
python下载图片实现方法(超简单)
2017/07/21 Python
Python实现邮件的批量发送的示例代码
2018/01/23 Python
Python实现多线程的两种方式分析
2018/08/29 Python
python获取磁盘号下盘符步骤详解
2019/06/19 Python
Django 源码WSGI剖析过程详解
2019/08/05 Python
tensorflow多维张量计算实例
2020/02/11 Python
Django中FilePathField字段的用法
2020/05/21 Python
如何在python中判断变量的类型
2020/07/29 Python
来自南加州灵感的工作和娱乐服装:TravisMathew
2019/05/01 全球购物
介绍一下木马病毒的种类
2015/07/26 面试题
实习销售业务员自我鉴定
2013/09/21 职场文书
服装公司总经理岗位职责
2013/11/30 职场文书
师德培训心得体会2016
2016/01/09 职场文书
React forwardRef的使用方法及注意点
2021/06/13 Javascript