Vue获取DOM元素的属性值
项目中需要做一个小弹层,如下图:
我需要知道点击元素距离顶部的值,再计算弹层的top值,如下图:
在vue中如何获取到DOM元素距离窗口顶部的值呢?
1.通过$event获取
html:
<div class="sort-item" @click="showFilter($event)">{{currentFilter}}<div class="sort-icon"><i class="iconfont icon-shaixuan"></i></div> </div>
methods:
showFilter: function ($event) {this.filterShow = true;this.popoverShow = true;this.filterPosTop = $event.currentTarget.getBoundingClientRect().top; },
如下图:
2.通过this.$refs.***获取
1.目标DOM定义ref值:
2.通过 【this.$refs.***.属性名】 获取相关属性的值:
Vue获取DOM元素的属性值相关推荐
- Vue获取DOM元素并修改属性
Vue获取DOM元素 Vue获取DOM元素有两种方法 直接给相应的元素加id,然后再使用document.getElementById("id");获取 使用ref,给相应的元素加 ...
- Vue 获取dom元素中的自定义属性值
方法一:通过绑定函数传参直接获取DOM元素自定义的值 <div id="app"><button @click="getData($event,'100 ...
- Vue 获取DOM元素 ,给DOM增加事件的特殊情况
Vue 获取DOM元素 ,给DOM增加事件的特殊情况 给标签绑定ref属性 使用this.$refs.xxx 获取原生的jsDOM对象 ref属性值不能重名 Vue.component('subCom ...
- 八.vue获取dom元素
vue获取dom元素 方法一:直接给相应的元素加id,然后再document.getElementById("id");获取,然后设置相应属性或样式 方法二:使用ref,给相应的元 ...
- Vue笔记四:Vue获取DOM元素和组件元素的方法
文章目录 Vue获取组件元素 ref获取组件元素 Vue获取组件元素 如果想使用哪个DOM元素,就给它加上ref属性,然后用$refs属性获取它的元素对象,示例如下: 全部代码: <!DOCTY ...
- vue获取dom元素值
1.通过refs来获取dom元素内容 2.需要利用到jq,但是不支持,学习vue.js,都说需要抛弃jq,否则会禁锢你的思想 通过refs方法 ref 被用来给元素或子组件注册引用信息.引用信息将会注 ...
- ref 引用(vue获取DOM元素)
ref 引用 jquery 牛逼 简化了程序员操作DOM的过程 vue 优势: MVVM 在 vue 中,程序员不需要操作DOM.只需要把数据维护好!(数据驱动视图) 结论:在 vue 项目,强烈不建 ...
- vue获取dom元素与修改样式详解
vue中如何获取dom元素呢? 步骤详解 在标签上加上ref属性 如 : 在js中通过 this.$refs.加ref的值便可以获取dom 如:this.$refs.refDemo 修改对应的样式名 ...
- vue获取dom元素的内容
通过ref来获取dom元素 在vue官网上对ref的解释 ref 被用来给元素或子组件注册引用信息.引用信息将会注册在父组件的 $refs 对象上.如果在普通的 DOM 元素上使用,引用指向的就是 D ...
最新文章
- 源码剖析transformer、self-attention(自注意力机制)原理!
- PB控制性能TreeView
- CodeForces 597A Divisibility
- Python3使用tkinter编写GUI程序
- 《dinv into python》开始了解python
- (转)关于数据库存储过程分页DatagridView BindingNavigator 控件的详细实现
- 帆软报表重要Activator之DesignerInitActivator之二
- html图片上传阅览并且点击放大
- 遗传算法求解装箱问题c语言,装箱或背包问题? (或者遗传算法解决)
- Jenkins testng maven reportng
- 生产阶段Webpack打包【基础打包】
- php+求二分查找递归算法,PHP二分查找(递归和循环)
- 抖音txt表白html,抖音vbs表白代码的技巧分享
- 怎么更改文件类型/后缀?
- JS实现自定义右键菜单
- 更改网络计算机ip,教你快速修改电脑IP地址
- CorelDraw手表实例实操作让你全面了解技术的综合应用
- 微信小程序中使用wx.showToast()进行界面交互
- 计算机组成原理sp接口,计算机组成原理2008年4月真题试题(02318)
- 2023USNews美国加州系大学排名
热门文章
- 软件工程网络15个人阅读作业1
- js_md5加密和base64的加密解密
- 基于jquery的复选树的插件
- IOS绘制渐变背景色折线图的一种尝试
- wxt_hillwill的知识脉络
- avs3 ts格式封装 标准_第480期【软件】吊打格式工厂—高清视频转换器WonderFox HD Video便携版...
- 服务器内部错误_阿里云服务器被CC攻击怎么办
- linux 进目录输入密码,scp在Linux主机之间复制文件/目录不用输入密码
- 结构方程模型-调节(干扰)效应检验(一)
- 机器学习方向企业面试题(二)