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 相关文章推荐
再谈IE中Flash控件的自动激活 ObjectWrap
Mar 09 Javascript
js调用flash的效果代码
Apr 26 Javascript
js中把JSON字符串转换成JSON对象最好的方法
Mar 21 Javascript
JavaScript事件委托技术实例分析
Feb 06 Javascript
jquery Validation表单验证使用详解
Sep 12 Javascript
JavaScript中的getMilliseconds()方法使用详解
Jun 10 Javascript
最原始的jQuery注册验证方式
Oct 11 Javascript
jQuery回调方法使用示例
Jun 26 jQuery
React进阶学习之组件的解耦之道
Aug 07 Javascript
JavaScript 通过Ajax 动态加载CheckBox复选框
Aug 31 Javascript
vue store之状态管理模式的详细介绍
Jun 13 Javascript
vue+axios实现post文件下载
Sep 25 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手机号码归属地查询代码(API接口/mysql)
2012/09/04 PHP
php 目录遍历、删除 函数的使用介绍
2013/04/28 PHP
Yii2 assets清除缓存的方法
2016/05/16 PHP
ThinkPHP5.0框架控制器继承基类和自定义类示例
2018/05/25 PHP
phpfpm的作用和用法
2019/10/10 PHP
javascript下判断一个对象是否具有指定名称的属性的的代码
2010/01/11 Javascript
有趣的javascript数组定义方法
2010/09/10 Javascript
javascript实现模拟时钟的方法
2015/05/13 Javascript
JS代码实现百度地图 画圆 删除标注
2016/10/12 Javascript
Seajs是什么及sea.js 由来,特点以及优势
2016/10/13 Javascript
基于jQuery制作小图标上下滑动特效
2017/01/18 Javascript
JS判断时间段的实现代码
2017/06/14 Javascript
Array数组对象中的forEach、map、filter及reduce详析
2018/08/02 Javascript
jquery拖拽自动排序插件使用方法详解
2020/07/20 jQuery
JS执行控制之节流模式实例分析
2018/12/21 Javascript
小程序组件之自定义顶部导航实例
2019/06/12 Javascript
vue获取验证码倒计时组件
2019/08/26 Javascript
Vue 实现点击空白处隐藏某节点的三种方式(指令、普通、遮罩)
2019/10/23 Javascript
解决iview table组件里的 固定列 表格不自适应的问题
2020/11/13 Javascript
在Django的视图中使用数据库查询的方法
2015/07/16 Python
利用Python中SocketServer 实现客户端与服务器间非阻塞通信
2016/12/15 Python
python如何把嵌套列表转变成普通列表
2018/03/20 Python
删除DataFrame中值全为NaN或者包含有NaN的列或行方法
2018/11/06 Python
Python实现一个数组除以一个数的例子
2019/07/20 Python
python的scipy实现插值的示例代码
2019/11/12 Python
浅谈keras中的Merge层(实现层的相加、相减、相乘实例)
2020/05/23 Python
python 实现ping测试延迟的两种方法
2020/12/10 Python
M1芯片安装python3.9.1的实现
2021/02/02 Python
TensorFlow的环境配置与安装方法
2021/02/20 Python
三严三实学习心得体会
2014/10/13 职场文书
毕业设计指导教师评语
2014/12/30 职场文书
法人代表证明书范本
2015/06/18 职场文书
素质教育学习心得体会
2016/01/19 职场文书
Java Optional<Foo>转换成List<Bar>的实例方法
2021/06/20 Java/Android
JS数组去重详情
2021/11/07 Javascript
Go语言基础函数基本用法及示例详解
2021/11/17 Golang