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 相关文章推荐
Mozilla 表达式 __noSuchMethod__
Apr 05 Javascript
JavaScript 学习笔记(五)
Dec 31 Javascript
js中for in的用法示例解析
Dec 25 Javascript
JS实现让网页背景图片斜向移动的方法
Feb 25 Javascript
jQuery实现简单的列表式导航菜单效果代码
Aug 31 Javascript
关于网页中的无缝滚动的js代码
Jun 09 Javascript
BootStrap Fileinput上传插件使用实例代码
Jul 28 Javascript
vue-router中scrollBehavior的巧妙用法
Jul 09 Javascript
微信小程序button标签open-type属性原理解析
Jan 21 Javascript
JavaScript前端实现压缩图片功能
Mar 06 Javascript
vue-cil之axios的二次封装与proxy反向代理使用说明
Apr 07 Vue.js
使用vue判断当前环境是安卓还是IOS
Apr 12 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
多重?l件?合查?(一)
2006/10/09 PHP
php 常用类汇总 推荐收藏
2010/05/13 PHP
php实现下载限制速度示例分享
2014/02/13 PHP
WordPress中is_singular()函数简介
2015/02/05 PHP
PHP嵌套输出缓冲代码实例
2015/05/12 PHP
thinkPHP显示不出验证码的原因与解决方法分析
2017/05/20 PHP
PHP基于rabbitmq操作类的生产者和消费者功能示例
2018/06/16 PHP
Javascript中的isNaN函数使用说明
2011/11/10 Javascript
鼠标放在图片上显示大图的JS代码
2013/03/26 Javascript
jquery实现select选中行、列合计示例
2014/04/25 Javascript
javascript实现网页子页面遍历回调的方法(涉及 window.frames、递归函数、函数上下文)
2015/07/27 Javascript
js实现匹配时换色的输入提示特效代码
2015/08/17 Javascript
jQuery实现的分子运动小球碰撞效果
2016/01/27 Javascript
纯js实现倒计时功能
2017/01/06 Javascript
JS实现的四级密码强度检测功能示例
2017/05/11 Javascript
JavaScript实现的原生态兼容IE6可调可控滚动文字功能详解
2017/09/19 Javascript
vue项目中使用axios上传图片等文件操作
2017/11/02 Javascript
JavaScript树的深度优先遍历和广度优先遍历算法示例
2018/07/30 Javascript
vue-image-crop基于Vue的移动端图片裁剪组件示例
2018/08/28 Javascript
小程序关于请求同步的总结
2019/05/05 Javascript
微信小程序页面上下滚动效果
2020/11/18 Javascript
layer.confirm()右边按钮实现href的例子
2019/09/27 Javascript
对Python的zip函数妙用,旋转矩阵详解
2018/12/13 Python
python常见字符串处理函数与用法汇总
2019/10/30 Python
Python Sympy计算梯度、散度和旋度的实例
2019/12/06 Python
Python tkinter实现图片标注功能(完整代码)
2019/12/08 Python
pycharm 2019 最新激活方式(pycharm破解、激活)
2020/09/22 Python
Python版中国省市经纬度
2020/02/11 Python
Kears 使用:通过回调函数保存最佳准确率下的模型操作
2020/06/17 Python
python交互模式基础知识点学习
2020/06/18 Python
曼联官方网上商店:Manchester United Direct
2017/07/28 全球购物
求职者简历中的自我评价
2013/10/20 职场文书
副董事长岗位职责
2014/04/02 职场文书
幼师自荐信范文
2015/03/06 职场文书
2015秋季开学典礼新闻稿
2015/07/17 职场文书
2016年校园社会综合治理宣传月活动总结
2016/03/16 职场文书