Vue——获取当前元素方法 $event

首先 vue的点击事件是用 @click = “clickfun()” 属性在html中绑定的,

在点击的函数中添加$event 参数就可以了

<button @click = “clickfun($event)”>点击</button>

methods: {

    clickfun(e) {

        // e.target 是你当前点击的元素

        // e.currentTarget 是你绑定事件的元素

    }

},

修改样式

obj就是传入的$event

// 鼠标放上 修改当前tr标签的背景色

changeOver:function (obj) {

    obj.currentTarget.style.background="rgb(244, 250, 251)";

},

// 鼠标离开

changeOut:function (obj) {

    obj.currentTarget.style.background="white";

}

原文地址：https://www.cnblogs.com/coder2020/p/12170681.html

时间： 2024-07-28 13:32:42

Vue——获取当前元素方法 $event的相关文章

vue获取当前元素

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue获取当前元素</title> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> </head> <body> <div id=&q

这里我想到了2个方法: 方法一: 直接给相应的元素加id,然后再document.getElementById("id");获取,然后设置相应属性或样式方法二: 使用ref,给相应的元素加ref=“name” 然后再this.$refs.name获取到该元素注意:在获取相应元素之前,必须在mount钩子进行挂载,否则获取到的值为空, 如果是给子组件加id并修改自定义属性,则直接会加载改子组件对应的外层div上,并不会改变该子组件原本的自定义属性的值如果给子组件加ref,

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

Vue获取DOM元素样式 && 样式更改

在 vue 中用 document 获取 dom 节点进行节点样式更改的时候有可能会出现 'style' is not definde的错误,这时候可以在 mounted 里用 $refs 来获取样式,并进行更改: <template> <div style="display: block;" ref="abc">  </div> </template> <script>

vue 获取dom元素

<template> <div style="display: block;" ref="abc">  </div> </template> <script> export default { mounted: function () { // 此处不能用beforeMounte console.log(this.$refs.abc.style.cssText) } }

vue获取点击事件源的方法

1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 <head> 4 <meta charset="utf-8"> 5 <title>vue click事件获取当前元素对象</title> 6 <script src="http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.13/vue.min.js"

二、vue学习--父元素如何获取子元素的值，子元素如何获取父元素的值

下图是父元素: 下图是子元素,获取父元素的值,使用props定义属性,这样就可以获取到父元素上传过来的set .place.type,拿到值就可以做一些自己的逻辑处理二.子元素给父元素传值? 下图为子元素将值传递出去的方式,使用emit将值公布给父元素,见下图: 父元素需要接受子元素给的值,在父元素中相应的要有propMethods属性,这个属性可以使用v-on的方式绑定,也可以使用@propMethods的方式,见下图: 上图中的login是处理事件,这里点击按钮时需要子元素来触发事件,所以

jquery获取父元素或父节点的方法

jquery获取父元素方法比较多,比如parent(),parents(),closest()这些都能帮你实现查找父元素或节点,下面我们来一一讲解: 先举个例子, <ul class="parent1"> <li><a href="#" id="item1">jquery获取父节点</a></li> <li><a href="#">jquery

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 ' ,我们可以把这次修改理解为数据