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 相关文章推荐
让GoogleCode的SVN下的HTML文件在FireFox下正常显示.
May 25 Javascript
关于页面嵌入swf覆盖div层的问题的解决方法
Feb 11 Javascript
jQuery实现的进度条效果
Jul 15 Javascript
javascript实现随机生成DIV背景色
Jun 20 Javascript
JavaScript遍历Json串浏览器输出的结果不统一问题
Nov 03 Javascript
JS常用加密编码与算法实例总结
Dec 22 Javascript
vue.js数据绑定的方法(单向、双向和一次性绑定)
Jul 13 Javascript
AngularJS使用ng-repeat遍历二维数组元素的方法详解
Nov 11 Javascript
Vue中render函数的使用方法
Jan 31 Javascript
简单说说angular.json文件的使用
Oct 29 Javascript
Vue路由对象属性 .meta $route.matched详解
Nov 04 Javascript
js 压缩图片的示例(只缩小体积,不更改图片尺寸)
Oct 21 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 什么是PEAR?
2009/03/19 PHP
PHP概率计算函数汇总
2015/09/13 PHP
PHP实现的大文件切割与合并功能示例
2018/04/10 PHP
在JS中最常看到切最容易迷惑的语法(转)
2010/10/29 Javascript
js精度溢出解决方案
2012/12/02 Javascript
jquery实现checkbox 全选/全不选的通用写法
2014/02/22 Javascript
使用 js+正则表达式为关键词添加链接
2014/11/11 Javascript
jQuery中:file选择器用法实例
2015/01/04 Javascript
js获取当前日期前七天的方法
2015/02/28 Javascript
使用纯javascript实现经典扫雷游戏
2015/04/23 Javascript
AngularJS 2.0新特性有哪些
2016/02/18 Javascript
JavaScript实现弹出DIV层同时页面背景渐变成半透明效果
2016/03/25 Javascript
让你一句话理解闭包(简单易懂)
2016/06/03 Javascript
setTimeout学习小结
2017/02/08 Javascript
微信小程序 request接口的封装实例代码
2017/04/26 Javascript
Angular指令之restict匹配模式的详解
2017/07/27 Javascript
bootstrap模态框弹出和隐藏,动态改变中间内容的实例
2018/08/10 Javascript
JavaScript相等运算符的九条规则示例详解
2019/10/20 Javascript
webpack 如何同时输出压缩和未压缩的文件的实现步骤
2020/06/05 Javascript
微信小程序12行js代码自己写个滑块功能(推荐)
2020/07/15 Javascript
Python查询Mysql时返回字典结构的代码
2012/06/18 Python
用Python从零实现贝叶斯分类器的机器学习的教程
2015/03/31 Python
python对指定目录下文件进行批量重命名的方法
2015/04/18 Python
深入理解Django的自定义过滤器
2017/10/17 Python
Python列表生成式与生成器操作示例
2018/08/01 Python
python使用selenium登录QQ邮箱(附带滑动解锁)
2019/01/23 Python
python3+selenium获取页面加载的所有静态资源文件链接操作
2020/05/04 Python
Python字典fromkeys()方法使用代码实例
2020/07/20 Python
python 如何上传包到pypi
2020/12/24 Python
Rosetta Stone官方网站:语言学习
2019/01/05 全球购物
法人代表授权委托书范文
2014/09/10 职场文书
地道战观后感400字
2015/06/04 职场文书
大学生活感想
2015/08/10 职场文书
建筑工程挂靠协议书
2016/03/23 职场文书
浅谈Python3中datetime不同时区转换介绍与踩坑
2021/08/02 Python
JavaScript中isPrototypeOf函数
2021/11/07 Javascript