vue获取DOM元素并设置属性的两种实现方法
更新时间：2017年09月30日 08:50:05 作者：蓓蕾心晴
下面小编就为大家带来一篇vue获取DOM元素并设置属性的两种实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
这里我想到了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元素并设置属性的两种实现方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要给大家介绍了关于Vue动态改变css样式的3种方法,在Vue.js中我们经常需要根据特定的条件或事件来动态地修改CSS样式,文中通过代码介绍的非常详细,需要的朋友可以参考下2023-11-11
这篇文章主要介绍了vue npm install 安装某个指定的版本操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
本篇内容给大家总结了VUE的重要难点，并把代码做了详细分享，有兴趣的朋友参考学习下。2018-03-03
vue实现两级select联动+input赋值+select选项清空
这篇文章主要介绍了vue实现两级select联动+input赋值+select选项清空过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-08-08
Vue3中provide和inject作用和场景是顶层组件向任意的底层组件传递数据和方法,实现跨层组件通信,本文通过实例介绍Vue3 provide和inject的相关知识,感兴趣的朋友一起看看吧2023-11-11
在web项目开发的过程中,经常会遇到客服端重复发送请求的场景,下面这篇文章主要给大家介绍了关于Vue路由切换和Axios接口取消重复请求的相关资料,需要的朋友可以参考下2022-05-05
vue canvas绘制矩形并解决由clearRec带来的闪屏问题
这篇文章主要介绍了vue canvas绘制矩形并解决由clearRec带来的闪屏问题,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-09-09
在开发项目的时候，我们一般都用 vue-cli 来避免繁琐的 webpack 配置和 template 配置。这篇文章主要介绍了如何写一个 vue 插件,需要的朋友可以参考下2019-06-06
Vue中@click.stop和@click.prevent实例详解
当我们使用Vue.js开发前端应用时,经常会在模版中使用@click指令来响应用户的点击事件,这篇文章主要给大家介绍了关于Vue中@click.stop和@click.prevent的相关资料,需要的朋友可以参考下2024-04-04
这篇文章主要介绍了vue.js将时间戳转化为日期格式的实现代码,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-06-06
最新评论