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 - HTML的request类
Jul 15 Javascript
使用JS进行目录上传(相当于批量上传)
Dec 05 Javascript
在浏览器中获取当前执行的脚本文件名的代码
Jul 19 Javascript
jQuery事件绑定.on()简要概述及应用
Feb 07 Javascript
jQuery遍历对象、数组、集合实例
Nov 08 Javascript
jQuery实现页面滚动时智能浮动定位
Jan 08 Javascript
javascript获取以及设置光标位置
Feb 16 Javascript
详解webpack2+React 实例demo
Sep 11 Javascript
jQuery实现每日秒杀商品倒计时功能
Sep 06 jQuery
JavaScript检测浏览器是否支持CSS变量代码实例
Apr 03 Javascript
VUE table表格动态添加一列数据,新增的这些数据不可以编辑(v-model绑定的数据不能实时更新)
Apr 03 Javascript
vue-cropper组件实现图片切割上传
May 27 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
php cout<<的一点看法
2010/01/24 PHP
检查url链接是否已经有参数的php代码 添加 ? 或 &
2010/02/09 PHP
PHP连接access数据库
2015/03/27 PHP
php类的自动加载操作实例详解
2016/09/28 PHP
PHP面向对象自动加载机制原理与用法分析
2016/10/14 PHP
利用javascript查看html源文件
2006/11/08 Javascript
jQuery 顺便学习下CSS选择器 奇偶匹配nth-child(even)
2010/05/24 Javascript
javascript学习基础笔记之DOM对象操作
2011/11/03 Javascript
详解AngularJS中的表达式使用
2015/06/16 Javascript
JavaScript开发者必备的10个Sublime Text插件
2016/02/27 Javascript
jquery UI Datepicker时间控件冲突问题解决
2016/12/16 Javascript
深入理解Angularjs向指令传递数据双向绑定机制
2016/12/31 Javascript
easyUI combobox实现联动效果
2017/01/17 Javascript
three.js实现3D模型展示的示例代码
2017/12/31 Javascript
详解webpack-dev-server使用方法
2018/09/14 Javascript
js实现抽奖的两种方法
2020/03/19 Javascript
JS实现购物车基本功能
2020/11/08 Javascript
[03:12]完美世界DOTA2联赛PWL DAY7集锦
2020/11/06 DOTA
Python实现简单http服务器
2018/04/12 Python
opencv实现图片模糊和锐化操作
2018/11/19 Python
Python Image模块基本图像处理操作小结
2019/04/13 Python
Python Django的安装配置教程图文详解
2019/07/17 Python
Python3 使用map()批量的转换数据类型,如str转float的实现
2019/11/29 Python
在spyder IPython console中,运行代码加入参数的实例
2020/04/20 Python
python怎么对数字进行过滤
2020/07/05 Python
python 基于opencv操作摄像头
2020/12/24 Python
sklearn中的交叉验证的实现(Cross-Validation)
2021/02/22 Python
美国在线购买空气净化器、除湿器、加湿器网站:AllergyBuyersClub
2021/03/16 全球购物
short s1 = 1; s1 = s1 + 1;有什么错? short s1 = 1; s1 += 1;有什么错?
2014/09/26 面试题
个人自我鉴定范文
2013/10/04 职场文书
公司庆典活动邀请函
2014/01/09 职场文书
贷款承诺书范文
2014/05/19 职场文书
2014年社区居委会主任重阳节讲话稿
2014/09/25 职场文书
幼儿园辞职书
2015/02/26 职场文书
文明和谐家庭事迹材料(2016精选版)
2016/02/29 职场文书
MySQL索引是啥?不懂就问
2021/07/21 MySQL