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 相关文章推荐
jQuery asp.net 用json格式返回自定义对象
Apr 07 Javascript
FileUpload上传图片(图片不变形)
Aug 05 Javascript
js如何获取object类型里的键值
Feb 18 Javascript
jQuery如何将选中的对象转化为原始的DOM对象
Jun 09 Javascript
a标签的href与onclick事件的区别详解
Nov 12 Javascript
JavaScript中window.showModalDialog()用法详解
Dec 18 Javascript
jQuery制作简洁的图片轮播效果
Apr 03 Javascript
js老生常谈之this,constructor ,prototype全面解析
Apr 05 Javascript
AngularJS中过滤器的使用与自定义实例代码
Sep 17 Javascript
Webpack如何引入bootstrap的方法
Jun 17 Javascript
layui实现table加载的示例代码
Aug 14 Javascript
Vue中jsx不完全应用指南小结
Nov 01 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中的时间显示
2007/01/18 PHP
JQuery Tips(3) 关于$()包装集内元素的改变
2009/12/14 Javascript
javascript深入理解js闭包
2010/07/03 Javascript
基于jQuery的淡入淡出可自动切换的幻灯插件打包下载
2010/09/15 Javascript
写得不错的jquery table鼠标经过变色代码
2013/09/27 Javascript
div模拟选择框示例代码
2013/11/03 Javascript
JavaScript表单验证实例之验证表单项是否为空
2016/01/10 Javascript
jQuery实现根据滚动条位置加载相应内容功能
2016/07/18 Javascript
jQuery post数据至ashx实例详解
2016/11/18 Javascript
JS获取鼠标坐标并且根据鼠标位置不同弹出不同内容
2017/06/12 Javascript
详解VUE-地区选择器(V-Distpicker)组件使用心得
2018/05/07 Javascript
重新认识vue之事件阻止冒泡的实现
2018/08/02 Javascript
angular4中引入echarts的方法示例
2019/01/29 Javascript
ES6 proxy和reflect的使用方法与应用实例分析
2020/02/15 Javascript
VUE页面中通过双击实现复制表格中内容的示例代码
2020/06/11 Javascript
Vue使用Three.js加载glTF模型的方法详解
2020/06/14 Javascript
OpenLayers3实现地图鹰眼以及地图比例尺的添加
2020/09/25 Javascript
[47:03]完美世界DOTA2联赛PWL S3 Galaxy Racer vs Phoenix 第二场 12.10
2020/12/13 DOTA
Python中使用bidict模块双向字典结构的奇技淫巧
2016/07/12 Python
python使用pymysql实现操作mysql
2016/09/13 Python
Python数据类型中的“冒号“[::]——分片与步长操作示例
2018/01/24 Python
python 将数据保存为excel的xls格式(实例讲解)
2018/05/03 Python
详解基于django实现的webssh简单例子
2018/07/17 Python
python实现转圈打印矩阵
2019/03/02 Python
浅谈Python 敏感词过滤的实现
2019/08/15 Python
TensorFlow2.1.0安装过程中setuptools、wrapt等相关错误指南
2020/04/08 Python
python中id函数运行方式
2020/07/03 Python
澳大利亚领先的宠物用品商店:VetSupply
2017/09/08 全球购物
美国礼品卡交易网站:Cardpool
2018/08/27 全球购物
海南地接欢迎词
2014/01/14 职场文书
运动会广播稿60字
2014/01/15 职场文书
大学奖学金获奖感言
2014/08/15 职场文书
辞职信范文大全
2015/03/02 职场文书
投标单位介绍信
2015/05/05 职场文书
试了下Golang实现try catch的方法
2021/07/01 Golang
python获取字符串中的email
2022/03/31 Python