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实用技巧(一)
Aug 16 Javascript
js 点击页面其他地方关闭弹出层(示例代码)
Dec 24 Javascript
javascript制作2048游戏
Mar 30 Javascript
JavaScript在form表单中使用button按钮实现submit提交方法
Jan 23 Javascript
原生js实现秒表计时器功能
Feb 16 Javascript
HTML5实现微信拍摄上传照片功能
Apr 21 Javascript
利用node.js如何创建子进程详解
Dec 09 Javascript
用node-webkit把web应用打包成桌面应用(windows环境)
Feb 01 Javascript
Vue路由切换时的左滑和右滑效果示例
May 29 Javascript
微信小程序使用scroll-view标签实现自动滑动到底部功能的实例代码
Nov 09 Javascript
node.js爬取中关村的在线电瓶车信息
Nov 13 Javascript
vue中动态select的使用方法示例
Oct 28 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面向对象的方法重载两种版本比较
2008/09/08 PHP
phpmyadmin3 安装配置图解教程
2012/03/29 PHP
PHP中防止SQL注入方法详解
2014/12/25 PHP
PHP7常量数组用法分析
2016/09/26 PHP
php使用mysqli和pdo扩展,测试对比mysql数据库的执行效率完整示例
2019/05/09 PHP
Laravel 自动生成验证的实例讲解:login / logout
2019/10/14 PHP
Yii Framework框架开发微信公众平台示例
2020/04/26 PHP
Flash对联广告的关闭按钮讨论
2007/01/30 Javascript
Firefox outerHTML实现代码
2009/06/04 Javascript
网易JS面试题与Javascript词法作用域说明
2010/11/09 Javascript
jQuery语法高亮插件支持各种程序源代码语法着色加亮
2013/04/27 Javascript
jQuery中json对象的复制方式介绍(数组及对象)
2013/06/08 Javascript
jQuery简单实现图片预加载
2015/04/20 Javascript
Javascript发送AJAX请求实例代码
2016/08/21 Javascript
通过网页查看JS源码中汉字显示乱码的解决方法
2016/10/26 Javascript
简单实现jQuery弹窗效果
2017/10/30 jQuery
10行原生JS实现文字无缝滚动(超简单)
2018/01/02 Javascript
使用 Node.js 开发资讯爬虫流程
2018/01/07 Javascript
快速了解vue-cli 3.0 新特性
2018/02/28 Javascript
Express之托管静态文件的方法
2018/06/01 Javascript
Vue-cli3.X使用px2 rem遇到的问题及解决方法
2019/08/08 Javascript
axios实现文件上传并获取进度
2020/03/25 Javascript
JavaScript的垃圾回收机制与内存管理
2020/08/06 Javascript
Python实现递归遍历文件夹并删除文件
2016/04/18 Python
python3 拼接字符串的7种方法
2018/09/12 Python
Python小进度条显示代码
2019/03/05 Python
用python求一个数组的和与平均值的实现方法
2019/06/29 Python
django-csrf使用和禁用方式
2020/03/13 Python
Python无损压缩图片的示例代码
2020/08/06 Python
全世界最美丽的四星和五星级酒店预订:Prestigia.com
2017/11/15 全球购物
Holiday Inn中国官网:IHG旗下假日酒店预订
2018/04/08 全球购物
《梅兰芳学艺》教学反思
2014/02/24 职场文书
干部鉴定材料
2014/05/18 职场文书
小学生运动会报道稿
2014/09/12 职场文书
新年寄语2016
2015/08/17 职场文书
通过Python把学姐照片做成拼图游戏
2022/02/15 Python