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 相关文章推荐
图片之间的切换
Jun 26 Javascript
深入理解JavaScript系列(10) JavaScript核心(晋级高手必读篇)
Jan 15 Javascript
不用构造函数(Constructor)new关键字也能实现JavaScript的面向对象
Jan 11 Javascript
js监听键盘事件示例代码
Jul 26 Javascript
jquery动态添加删除(tr/td)
Feb 09 Javascript
在百度搜索结果中去除掉一些网站的资料(通过js控制不让显示)
May 02 Javascript
JS FormData上传文件的设置方法
Jul 05 Javascript
微信小程序删除处理详解
Aug 16 Javascript
关于vue表单提交防双/多击的例子
Oct 31 Javascript
Vue基于iview实现登录密码的显示与隐藏功能
Mar 06 Javascript
vue 路由meta 设置导航隐藏与显示功能的示例代码
Sep 04 Javascript
利用PHP实现递归删除链表元素的方法示例
Oct 23 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 缓存实现代码及详细注释
2010/05/16 PHP
PHP 创建标签云函数代码
2010/05/26 PHP
PHP在特殊字符前加斜杠的实现代码
2011/07/17 PHP
php程序的国际化实现方法(利用gettext)
2011/08/14 PHP
redis 队列操作的例子(php)
2012/04/12 PHP
PHP fopen()和 file_get_contents()应用与差异介绍
2014/03/19 PHP
PHP数组函数array_multisort()用法实例分析
2016/04/02 PHP
YII视图整合kindeditor扩展的方法
2016/07/13 PHP
Web层改进II-用xmlhttp 无声息提交复杂表单
2007/01/22 Javascript
JavaScript游戏之是男人就下100层代码打包
2010/11/08 Javascript
jQuery遍历对象、数组、集合实例
2014/11/08 Javascript
javascript基本算法汇总
2016/03/09 Javascript
BootStrap3学习笔记(一)之网格系统
2016/05/20 Javascript
浅谈jquery之on()绑定事件和off()解除绑定事件
2016/10/26 Javascript
微信小程序 wxapp地图 map详解
2016/10/31 Javascript
详解javascript表单的Ajax提交插件的使用
2016/12/29 Javascript
JavaScript实现的鼠标响应颜色渐变效果完整实例
2017/02/18 Javascript
react配置antd按需加载的使用
2019/02/11 Javascript
Python ORM框架SQLAlchemy学习笔记之关系映射实例
2014/06/10 Python
基于Python实现对PDF文件的OCR识别
2016/08/05 Python
Python 基础教程之闭包的使用方法
2017/09/29 Python
python实现视频分帧效果
2019/05/31 Python
python隐藏终端执行cmd命令的方法
2019/06/24 Python
基于Python的微信机器人开发 微信登录和获取好友列表实现解析
2019/08/21 Python
Python实现栈和队列的简单操作方法示例
2019/11/29 Python
keras模型保存为tensorflow的二进制模型方式
2020/05/25 Python
推荐10个HTML5响应式框架
2016/02/25 HTML / CSS
欧洲领先的技术商店:eibmarkt.com
2019/05/10 全球购物
国际商务系学生个人的自我评价
2013/11/26 职场文书
高中运动会广播稿
2014/01/21 职场文书
深入开展党的群众路线教育实践活动方案
2014/02/04 职场文书
法人代表授权委托书
2014/04/08 职场文书
监护人证明
2015/06/19 职场文书
预备党员入党感言
2015/08/01 职场文书
2016年社区植树节活动总结
2016/03/16 职场文书
vue+spring boot实现校验码功能
2021/05/27 Vue.js