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 相关文章推荐
禁止你的左键复制实用技巧
Jan 04 Javascript
Internet Explorer 11 浏览器介绍:别叫我IE
Sep 28 Javascript
window.onload与$(document).ready()的区别分析
May 30 Javascript
js字符串引用的两种方式(必看)
Sep 18 Javascript
让浏览器崩溃的12行JS代码(DoS攻击分析及防御)
Oct 10 Javascript
js 点击a标签 获取a的自定义属性方法
Nov 21 Javascript
js监听input输入框值的实时变化实例
Jan 26 Javascript
从零开始学习Node.js系列教程三:图片上传和显示方法示例
Apr 13 Javascript
详解JS构造函数中this和return
Sep 16 Javascript
了解JavaScript函数中的默认参数
May 30 Javascript
node.js中fs文件系统模块的使用方法实例详解
Feb 13 Javascript
Vue绑定用户接口实现代码示例
Nov 04 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
Yii2框架自定义验证规则操作示例
2019/02/08 PHP
thinkPHP5.1框架路由::get、post请求简单用法示例
2019/05/06 PHP
php fread函数使用方法总结
2019/05/28 PHP
浅说js变量
2011/05/25 Javascript
JavaScript获取和设置CheckBox状态的简单方法
2013/07/05 Javascript
jquery选择器-根据多个属性选择示例代码
2013/10/21 Javascript
node.js中的console.error方法使用说明
2014/12/10 Javascript
jquery滚动加载数据的方法
2015/03/09 Javascript
基于JavaScript实现鼠标向下滑动加载div的代码
2016/08/31 Javascript
javascript 四十条常用技巧大全
2016/09/09 Javascript
Vue 表单控件绑定的实现示例
2017/08/11 Javascript
详解IWinter 一个路由转控制器的 Nodejs 库
2017/11/15 NodeJs
详解webpack之scss和postcss-loader的配置
2018/01/09 Javascript
SVG实现时钟效果
2018/07/17 Javascript
Vue.js点击切换按钮改变内容的实例讲解
2018/08/22 Javascript
socket io与vue-cli的结合使用的示例代码
2018/11/01 Javascript
vue等两个接口都返回结果再执行下一步的实例
2020/09/08 Javascript
Vue 401配合Vuex防止多次弹框的案例
2020/11/11 Javascript
[49:35]2018DOTA2亚洲邀请赛3月30日 小组赛A组 KG VS TNC
2018/03/31 DOTA
python根据路径导入模块的方法
2014/09/30 Python
浅谈Python数据类型判断及列表脚本操作
2016/11/04 Python
python3.4用函数操作mysql5.7数据库
2017/06/23 Python
python爬虫项目设置一个中断重连的程序的实现
2019/07/26 Python
python实现视频读取和转化图片
2019/12/10 Python
python实现梯度下降和逻辑回归
2020/03/24 Python
CSS3 渐变(Gradients)之CSS3 径向渐变
2016/07/08 HTML / CSS
HTML5的一个显示电池状态的API简介
2015/06/18 HTML / CSS
美国厨房和园艺工具网上商店:Nestneed
2019/08/24 全球购物
工商管理实习自我鉴定
2013/09/28 职场文书
孝老爱亲模范事迹
2014/01/24 职场文书
农村婚礼主持词
2014/03/13 职场文书
综治维稳工作承诺书
2014/08/30 职场文书
通知函格式范文
2015/04/27 职场文书
大学毕业论文致谢词
2015/05/14 职场文书
go类型转换及与C的类型转换方式
2021/05/05 Golang
python中pd.cut()与pd.qcut()的对比及示例
2022/06/16 Python