<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. Linux NTP服务器的搭建及client自动更新时间

    Network Time Protocol(NTP)是用来使计算机时间同步化的一种协议,它可以使计算机对其服务器或时钟源(如石英钟,GPS等等)做同步化,它可以提供高精准度的时间校正(LAN上与标准间 ...

  2. WPF SAP水晶报表例子和打包Setup

    <Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x=" ...

  3. python-接口开发flask模块(二)全局host配置

    设置全局变量优势很多主要是可以方便修改参数不需要每个代码单独修改,只修改host配置就可以,减少出错率,提高工作效率MYSQL_HOST = 'XXX.XXX.CCC.XXX' MYSQL_PORT ...

  4. nacos 发布配置

    server 保留 2 份配置文件,一份在 mysql,一份在本地磁盘,同时在内存中缓存配置文件的 md5 值.当客户端获取配置时,server 直接返回本地磁盘文件,使用的是 sendFile ap ...

  5. idea中@data不生效

    idea中@data不生效,原因是idea中没有安装插件,记得重启

  6. 未解决:found 1 high severity vulnerability run `npm audit fix` to fix them, or `npm audit` for details

    问题出现: 在通过 `ng new hello-world` 命令新建项目时,项目出现以下警告: found high severity vulnerability run `npm audit fi ...

  7. Java ——接口

    本节重点思维导图 定义: public interface Traffic { public static final int sits = 4; public abstract void run() ...

  8. iptables规则

    iptables命令是Linux上常用的防火墙软件,是netfilter项目的一部分 iptables文件设置路径:命令:vim /etc/sysconfig/iptables-config 0x02 ...

  9. 13.DoS防御----BeEF浏览器渗透----暴力破解之美杜莎---DNS指南

    DoS防御 启用ICMP,UDP,TCP泛洪过滤 登录路由器管理后台 高级-安全部分 BeEF浏览器渗透 用kali进行客户端攻击 钓鱼攻击 打开beef 浏览器打开beef cd /usr/shar ...

  10. 关于SQL连接语句中的Integrated Security=SSPI/ture/false

    解决方法:即:Security Support Provider Interface设置Integrated Security为 True 的时候,连接语句前面的 UserID, PW 是不起作用的, ...