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 限制输入和粘贴(IE,firefox测试通过)
Nov 14 Javascript
jQuery图片切换插件jquery.cycle.js使用示例
Jun 16 Javascript
Node.js中安全调用系统命令的方法(避免注入安全漏洞)
Dec 05 Javascript
js中for in语句的用法讲解
Apr 24 Javascript
jQuery zclip插件实现跨浏览器复制功能
Nov 02 Javascript
JavaScript实现简单Tip提示框效果
Apr 20 Javascript
jQuery实现动态添加、删除按钮及input输入框的方法
Apr 27 jQuery
VUE 更好的 ajax 上传处理 axios.js实现代码
May 10 Javascript
JS库中的Particles.js在vue上的运用案例分析
Sep 13 Javascript
vue.js前后端数据交互之提交数据操作详解
Apr 24 Javascript
Vue之mixin全局的用法详解
Aug 22 Javascript
vue实现表格合并功能
Dec 01 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使用imagick模块实现图片缩放、裁剪、压缩示例
2014/04/17 PHP
10个实用的PHP正则表达式汇总
2014/10/23 PHP
Yii核心组件AssetManager原理分析
2014/12/02 PHP
php+mysqli批量查询多张表数据的方法
2015/01/29 PHP
PHP实现通用alert函数的方法
2015/03/11 PHP
Visual Studio中的jQuery智能提示设置方法
2010/03/27 Javascript
10款非常有用的 Ajax 插件分享
2012/03/14 Javascript
用JavaScript获取DOM元素位置和尺寸大小的方法
2013/04/12 Javascript
多种方式实现JS调用后台方法进行数据交互
2013/08/20 Javascript
js实现二代身份证号码验证详解
2014/11/20 Javascript
如何用jQuery实现ASP.NET GridView折叠伸展效果
2015/09/26 Javascript
利用jQuery实现CheckBox全选/全不选/反选的简单代码
2016/05/31 Javascript
Vue2.0实现1.0的搜索过滤器功能实例代码
2017/03/20 Javascript
jquery使用iscorll实现上拉、下拉加载刷新
2017/10/26 jQuery
JavaScript中的高级函数
2018/01/04 Javascript
基于Vue实现拖拽功能
2020/07/29 Javascript
微信小程序登录换取token的教程
2018/05/31 Javascript
JS左右无缝轮播功能完整实例
2019/05/16 Javascript
easyUI 实现的后台分页与前台显示功能示例
2020/06/01 Javascript
Vue中关闭弹窗组件时销毁并隐藏操作
2020/09/01 Javascript
Angular短信模板校验代码
2020/09/23 Javascript
Python通过websocket与js客户端通信示例分析
2014/06/25 Python
python多线程之事件Event的使用详解
2018/04/27 Python
Python实现分段线性插值
2018/12/17 Python
对python操作kafka写入json数据的简单demo分享
2018/12/27 Python
python生成器/yield协程/gevent写简单的图片下载器功能示例
2019/10/28 Python
解决Python spyder显示不全df列和行的问题
2020/04/20 Python
什么是Python中的顺序表
2020/06/02 Python
详解python百行有效代码实现汉诺塔小游戏(简约版)
2020/10/30 Python
利用CSS3实现平移动画效果示例代码
2016/10/12 HTML / CSS
物业客服专员岗位职责
2013/11/30 职场文书
大学生实习证明范本
2014/01/15 职场文书
对祖国的寄语大全
2014/04/11 职场文书
2014入党积极分子批评与自我批评思想报告
2014/10/06 职场文书
党员群众路线剖析材料
2014/10/08 职场文书
诚实守信主题班会
2015/08/13 职场文书