<li 
 @click='获取li标签' 
  :ref="center-li"
 id="center-li"    
 >
  =====我是li标签=====
</li>
<script>
  methods:{
    获取li标签(){
      var ulArr = this.$refs.center-li;
      console.log(ulArr ) //<li>=====我是li标签=====<li>
    
      var ulArr = ulArr.getElementById("center-li");
      console.log(ulArr ) //<li>=====我是li标签=====<li>
    }
  }
  //以上两种方法均可以获取到dom元素但是在vue中尽量不要操作dom
</script>

Vue获取dom元素的更多相关文章

  1. vue获取dom元素内容

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

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

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

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

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

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

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

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

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

  6. Vue 获取DOM元素ref

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

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

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

  8. Vue 获取dom元素之 ref 和 $refs 详解

    一.$refs 一个对象,持有ref注册过的所有元素或子组件.(注册过的 ref 的集合) 二.ref 被用来给元素或子组件注册引用信息.若用在dom元素上,引用指向的就是dom元素:若用在子组件上, ...

  9. Vue 获取dom元素中的自定义属性值

    方法一: HTML <div id="app"> <button @click="getData($event,'100')">点我&l ...

随机推荐

  1. tcpdump指定IP和端口抓包

    如下指定抓www.baidu.com 并且80端口的包 保存到test.cap 可以在Windows下面用wireshark打开 tcpdump 'port 80 and host www.baidu ...

  2. tomcat的work目录的作用

    最近发现,很多网友喜欢把tomcat的work目录里的东西叫做缓存,其实那不是很恰当,work目录只是tomcat的工作目录,也就是tomcat把jsp转换为class文件的工作目录,这也正是为什么它 ...

  3. 十二、RF自定义库(数据库)

    1.自定义第三方库 def DB_select_by_sql(self,db_name,sql): conn=pymysql.connect(db=db_name,user='root',passwo ...

  4. C#通用类库

    http://www.cnblogs.com/feiyangqingyun/archive/2010/12/20/1911630.html

  5. 用 Python 解答两道来自阿里伯乐系统的笔试题

    目录 目录 前言 题目一 分析 实现 题目二 分析 实现 前言 朋友到阿里面试,分享两道小题,博主比较闲就试着用 Python 解答一下,实现方式肯定是多种多样的,优劣也会各有不同,欢迎交流. 题目一 ...

  6. 测开之路一百四十八:WTForms表单验证

    使用WTForms表单验证,可以在数据建模时就设置验证信息和错误提示 创建模型时,设置验证内容,如必填.格式.长度 from flask_wtf import Formfrom wtforms imp ...

  7. JSP———数据交互【2】

    内置对象application 实现用户之间的数据共享 与session 对象不同的是,所有客户的 application 对象是相同的一个,即所有的客户共享这个内置的 application 对象 ...

  8. Katalon Studio学习笔记(三)——chromedriver与当前chrome版本不符,如何替换

    首先下载chrome版本对应的chromedriver.exe文件,然后找到katalon如下图所示文件夹中,替换chromedriver.exe重新启动katalon即可. 最新适配chrome 7 ...

  9. 嵌套的frame

    自动化的测试中,iframe的嵌套也是很常见的,对于嵌套的iframe,我们处理的方式是先进入到iframe的父节点, 再进入到子节点,然后可以对子节点里面的对象进行处理和操作.如下的html代码效果 ...

  10. 【HANA系列】SAP HANA数据处理的理解与分析一

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[HANA系列]SAP HANA数据处理的理解与 ...