vue 点击获取当前DOM元素

哈哈哈，昨天登QQ的时候，意外发现有人看了我写的博客，居然还加了我，这就激起了我内心的小波澜啊

公司最近在做电商，用的前端框架依然是VUE

矩MAX(微信公众号)可以搜的到哦，貌似小苹果的AppStore也可以搜的到，不过应该是内测版

回归中体哈，说一下今天做的领券中心

有点类似于京东的领券中心，刚测试完，券全被我领啦

效果就是点击立即领取，文字变为立即使用、弹出领取成功

但是因为接口不是实时的，所以我没有通过接口数据判断让用户点击领取的同时，让优惠券改变状态

但是，毛爷爷说过：办法总比困难多~

为了满足视觉效果，我耍了点小聪明~~~

这是我点击领取时走的接口，哈哈哈、小聪明就是我在走接口之前，将优惠券的状态改变了，

当然如果接口失败了，不影响其他地方，当页面刷新时，优惠券会恢复待领取的状态

其实，在之前我是把改变状态的那段放在接口请求了的，但是因为vue中的this是指向当前执行对象，放在请求里，this会执行接口，而非我点击的优惠券，实现不了优惠券的切换了

event.currentTarget是用来获取当前点击的DOM的

vue中，在不方便使用ref来改变的时候咱们可以通过原生js来修改元素的属性样式

嗯好吧，就说这些废话吧

我是菜鸟

如果你觉得我写的很垃圾，欢迎批评指正

原文地址：https://www.cnblogs.com/tongjiaojiao/p/9016188.html

时间： 2024-07-31 08:43:34

vue 点击获取当前DOM元素的相关文章

Jquery 方式获取 iframe Dom元素

Jquery 方式获取 iframe Dom元素测试页面代码: <html> <head> <title>jquery方式,访问iframe页面dom元素</title> <meta name="Author" content="孙勤波"> <meta http-equiv="Content-Type" content="text/html;charset

一.获取原生DOM 我们之前在vue中获取原生的DOM,都是利用document来获取的,不是很方便. vue为我们提供了ref属性,来方便的获取标签. <div ref='div1'></div> <p ref='p1'></p> <Home ref='home1'></Home> 获取标签: this.$refs.div1 //获取ref为'div1'的<div>标签 this.$refs.p1 //获取ref为'p1

JS获取HTML DOM元素的几种方法

目前我只知道下面这几种获取DOM元素的方法根据ID获取元素 getElementById 根据标签名获取元素 getElementsByTagName 根据className获取标签列表 getElementsByClassName 根据选择器获取到第一个找到的元素 document.querySelector 根据选择器获取到所有的元素 document.querySelectorAll 还有两个特殊的获取标签方式: 获取html的方法 documen

父子页面（iframe）相互获取对方dom元素

现在iframe的使用虽然开始越来越少,但是还是有牵涉到iframe的使用情况,特别是多个iframe互相嵌套,又要进行获取的情况. 现在整理了父子iframe之间互相获取的方式. (1)父页面获取子页面的方式. 主要通过: iframe的contentWindow属性,代表iframe所在的window对象. 示例如下: <script type="text/javascript"> window.onload = function(){ var cWindow = do

JS获取HTML DOM元素的方法

在JS中获取元素的方法有很多,可以根据实际需要选择合适的方法一.JS获取元素的方法 1)根据id获取标签元素 var div1=document.getElementById("div1"); 2)根据标签名获取标签列表 var divs=document.getElementsByTagName("div") 3)根据className获取标签列表 var div0=document.getElementsByClassName("div0"

Vue 获取DOM元素ref

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con

JS选取DOM元素的方法

摘自JavaScript权威指南(jQuery根据样式选择器查找元素的终极方式是先用getElementsByTagName(*)获取所有DOM元素,然后根据样式选择器对所有DOM元素进行筛选) 今天试了下各种选取元素的方法的速度,用原生的方法比jquery要快差不多8倍,IE8是最慢的,IE9的速度差不多是IE8的3倍,Chrome的表现最好,其次是Firefox) 选取文档元素的方法: 1.通过ID选取元素(getElementById) 1)使用方法:document.getElem

使用Vue.js获取dom元素

标签中添加ref属性,相当于id 在Vue中通过 $refs.ref的属性名获取或者设置dom元素 <div id="demo"> <button @click="fn">点击这里</button> <div ref="box" style="width:200px;height:300px">西南交大</div> </div> <sc

Vue自定义指令获取DOM元素

我们知道,Vue.js的核心是数据驱动,当数据有所变化时,DOM就会被更新,比如: <span v-text="msg"></span> export default { data(){ return{ msg : 'oldMsg' } } methods : { changeMsg : function(){ this.msg = 'newMsg' } } } 当调用了changeMsg方法,msg被修改为 ' newMsg ' ,我们可以把这次修改理解为数据