<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. git reset --hard 操作后的数据恢复

    在进行正文之前先简单介绍下git reset 命令 git reset git reset 命令用于改变当前的仓库状态,简单的场景用例:假设一次修改了两个文件,然而需要对这两个文件分别进行两次提交,在 ...

  2. windows下mingw编译faac

    进入目录先运行 ./bootstrap 接着就可以 ./configure --without-mp4v2 然后 make make install

  3. 1、VMware安装步骤

    最后重启电脑

  4. python - Tkinter 模块 - python 自带的gui模块

    Tkinter模块("Tk 接口")是Python的标准Tk GUI工具包的接口,位Python的内置模块,直接import tkinter即可使用. 1.创建窗口 from Tk ...

  5. docker 安装mysql 并将文件挂载到本地

    首先准备好挂载的文件路径 执行mysql创建以及挂载的命令(这里还可以使用-e环境变量来创建新用户MYSQL_USER,MYSQL_PASSWORD) docker run -d -p : --res ...

  6. Spring Boot 为什么这么火?(二)

    Spring Boot 的火 网上连载了 Spring Boot 系列文章,没想到这一开始便与 Spring Boot 深度结缘. 技术社区 Spring Boot 的文章越来越多:Spring Bo ...

  7. Spring源码深度解析

    Spring源码分析 Spring Web入门及源码学习 [Spring源码分析]Bean加载流程概览 Spring Framework 实现原理与源码解析系统 Spring源码分析--水门 Spri ...

  8. roslyn\csc.exe

    vs2019调试运行时提示roslyn\csc.exe错误时在nuget包管理器控制台里输入:  Update-Package Microsoft.CodeDom.Providers.DotNetCo ...

  9. SQL查询结果列拼接成逗号分隔的字符串:group_concat

    转自:SQL查询结果列拼接成逗号分隔的字符串 背景:做SQL查询时会经常需要,把查询的结果拼接成一个字符串. 解决方法: 通过 group_concat 函数 拼接的结果很长,导致拼接结果显示不全,可 ...

  10. python列表,字典,集合

    初识模块 import sys print(sys.path)#查看化境变量 print(sys.argv)#查看文件的相对路径,但是在pachrm中 会自动转为绝对路径 import os #os. ...