<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. [论文理解] LFFD: A Light and Fast Face Detector for Edge Devices

    LFFD: A Light and Fast Face Detector for Edge Devices 摘要 从微信推文中得知此人脸识别算法可以在跑2K图片90fps,仔细一看是在RTX2070下 ...

  2. leetcode 回文二叉树

    C++最简单的方法,遍历存在vector<int> ivec容器中,然后头尾对应比较 O(n)时间,O(n)空间 /** * Definition for singly-linked li ...

  3. JS - defer 和 async

    普通 <script src="script.js"></script> 没有 defer 或 async,浏览器会立即加载并执行指定的脚本,"立 ...

  4. js监听当前页面再次加载

    document.addEventListener("visibilitychange", function () { if (!document.hidden) { //处于当前 ...

  5. JDK7新特性

    二进制字面量 数字字面量可以出现下划线 switch语句可以用字符串 泛型简化 异常的多个catch合并 try..with...resource语句 import java.io.FileReade ...

  6. node-webkit-updater——NW.js自动更新

    NW.js自动更新三种方案: 1)node-webkit-updater(推荐) 2)nwjs-autoupdater 3)nw-autoupdater NW.js自动更新三种方案:[http://d ...

  7. 别把&和nohup混为一谈, 根本不是同一个东西好不好 ------ 聊聊./a.out & , nohut ./a.out , nohup ./a.out &的区别

    在第一家公司工作的时候, 我认识了&,在第二家公司工作的时候, 我认识了nohup,  这就是渊源.  随后, 我就一直糊涂用他们, 但并不懂这两个东西. 网上很多地方是乱扯, 瞎复制, 为什 ...

  8. 测试需要了解的技术之基础篇四__UI自动化测试体系

    UI自动化测试体系 1.Andriod 自动化测试:Appium 环境安装与架构介绍.Appium Desktop用例录制.Appium测试用例流程.元素定位方法 IA/AID/XPATH/UISel ...

  9. <class 'blog.admin.CategoryAdmin'>: (admin.E108) The value of 'list_display[0]' refers to 'mame', which is not a callable, an attribute of 'CategoryAdmin', or an attribute or method on 'blog.Category'

    系统反馈此类错误是因为行列映射时无法对应: 引起无法对应的原因有: 定义是缺少某列,定义时缩进导致,映射关系时缺少某列,(通俗讲列名对应不上). 这种错误多是python中的 因为其中对于空格的要求是 ...

  10. [Mac Terminal] ___MAC终端清屏快捷键

    清全屏: command + K 清上一行命令:command +  L