Html:

<li><a href="#" v-on:click="typeStyle">萨克斯萨克<span></span></a></li>

Js:

typeStyle: function (e) {

var el = e.target;

el.style.backgroundColor = 'green';

$(el).css("border","1px solid  #e4007f");

$(el).children("span").css("display","block");

}

vue获取当前元素

var el = e.target; //当前元素,可修改(能够用此方法获取到他的子元素等)

var el = e.currentTarget;//当前元素,不可修改(不能用此方法获取到他的子元素等)

$(el)-------当前jq元素

vue获取当前元素的更多相关文章

  1. vue 获取当前元素

    获取当前元素 Html: <li><a href="#" v-on:click="typeStyle">萨克斯萨克<span> ...

  2. vue获取dom元素内容

    通过ref来获取dom元素 在vue官网上对ref的解释 ref 被用来给元素或子组件注册引用信息.引用信息将会注册在父组件的 $refs 对象上.如果在普通的 DOM 元素上使用,引用指向的就是 D ...

  3. vue获取DOM元素并设置属性

    这里我想到了2个方法: 方法一: 直接给相应的元素加id,然后再document.getElementById("id");获取,然后设置相应属性或样式 方法二: 使用ref,给相 ...

  4. vue获取dom元素注意问题

    mounted(){ setTimeout(()=>{ this.contentToggle(); },1000) }, methods:{ contentToggle(){ console.l ...

  5. vue获取dom元素高度的方法

    获取高度: <div ref="自定义名称" > </div>要在钩子mounted里面dom结构生成后去获取dom的高度,宽度,修改样式等操作!!! mo ...

  6. Vue获取DOM元素的属性值

    项目中需要做一个小弹层,如下图: 我需要知道点击元素距离顶部的值,再计算弹层的top值,如下图: 在vue中如何获取到DOM元素距离窗口顶部的值呢? 1.通过$event获取 html: <di ...

  7. Vue获取dom元素

     <li  @click='获取li标签'    :ref="center-li" id="center-li"      > =====我是li标 ...

  8. Vue 获取DOM元素ref

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

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

    在 vue 中用 document 获取 dom 节点进行节点样式更改的时候有可能会出现 'style' is not definde的错误, 这时候可以在 mounted 里用 $refs 来获取样 ...

随机推荐

  1. 【JDK和Open JDK】平常使用的JDK和Open JDK有什么区别

    注意到这个问题,是在CentOS7上安装JDK的时候,查找相关的资料,发现安装JDK之前都需要检查或卸载系统上原生的Open JDK,这才引起了注意. 到了这里,引用查到的一篇说明. 转自:http: ...

  2. Spring Boot依赖引入的多种方式

    使用Spring Boot开发,不可避免的会面临Maven依赖包版本的管理. 有如下几种方式可以管理Spring Boot的版本. 使用parent继承 <?xml version=" ...

  3. ES6 import and export

    定义: 用来导入或者导出模块. ES6 的模块自动采用严格模式,不管你有没有在模块头部加上"use strict";. 严格模式主要有以下限制. 变量必须声明后再使用 函数的参数不 ...

  4. thinkphp5引入公共部分header、footer等

    由于用惯了tp3.2,改用tp5有些还是感觉别扭的 直接上问题:项目中需要用到引入公共导航.头部.底部.右边部分等等 首先要弄清楚thinkphp5的配置项是哪个文件,众所周知:config.php, ...

  5. CSS :root 测试

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  6. 利用js里的Dom和Date,自定义cookie的前端设置方法

    通过浏览器访问url时候浏览器会携带cookie,可利用cookie进行信息验证如用户验证,cookie前后端都可获取设置,后端用self.get_cookie和self.set_cookie,前端可 ...

  7. elementUI vue 页面加载的时候页面出现了黑字 页面优化处理 按钮弹出框文字

    elementUI 页面如果需要加载很多东西的时候, 自己定义的按钮或者弹出框dialog的文字就会显示在页面上, 一闪而过, 因此需要优化一下, elementUI 提供的loading有遮罩层, ...

  8. 个人练习:使用HTML+CSS制作二级菜单

    最近一直在学习HTML+CSS,刚看完如果制作下拉菜单部分,就想着做一个练练手. 先上成品图: 就是上面这个效果,横向菜单选项能点击,鼠标放在上面也能展开二级菜单,二级菜单也能点击,点击后就会在底下的 ...

  9. 通俗的理解java设计模式的准则

    本文部分内容摘抄自https://www.cnblogs.com/dolphin0520/p/3919839.html,加入了自己的理解: 一.单一职责原则 原文链接:http://blog.csdn ...

  10. git 入门教程之里程碑式标签

    "春风得意马蹄疾,一日看尽长安花",对于项目也是如此,最值得期待的恐怕就要数新版本发布的时刻了吧?每当发布新版本时要么是版本号命名(比如v0.0.1)或者代号命名(比如Chelse ...