通过ref来获取dom元素
在vue官网上对ref的解释
ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素; 如果用在子组件上,引用就指向组件实例
当 v-for 用于元素或组件的时候,引用信息将是包含 DOM 节点或组件实例的数组
 
比如我现在要实现的效果是点击用v-for生成的li ,获取到该元素的值
首先要获取当前点击的li元素,我们要做的是
1.给dom添加点击事件和ref属性
 
<li class="sidebar-list"  v-for="(item, index) in meunList"  @click="setPageMenu(index)" ref="menuItem">
<router-link class="sidebar-a" :to="{ path: item.listLink }" >{{item.listTitle}}</router-link>
</li>
 
2.然后在点击事件方法中使用ref
setPageMenu(index) {
//这个是获取当前menuItem值,用index来区分当前元素是v-for 产生的数组中的第几个数
let getMenuText = this.$refs.menuItem[index].innerText;
}

学习笔记,如有不足请多多指教

vue获取dom元素内容的更多相关文章

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

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

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

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

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

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

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

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

  5. Vue获取dom元素

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

  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. jQuery捕获-获取DOM元素内容和属性

    一.获取内容 1.text()-设置或返回所选元素的文本内容 2.html()-设置或返回所选元素的内容(包括HTML标记) 3.val()-设置或 返回表单字段的值 $(document).read ...

随机推荐

  1. 为效率而生:开源Mac版Google Authenticator认证客户端GoldenPassport

    最近运维同学为了提高安全性,用Google Authenticator对服务器加了双重认证,此后登录服务器需要先输入动态密码,在输入服务器密码.Google Authenticator相当于软toke ...

  2. Java的JDBC原生态学习以及连接池的用法

    JDBC是什么 JDBC(Java Data Base Connectivity)是Java访问数据库的桥梁,但它只是接口规范,具体实现是各数据库厂商提供的驱动程序(Driver). 应用程序.JDB ...

  3. [vijosP1303]导弹拦截(最长上升子序列转LCS)

    描述 某国为了防御敌国的导弹袭击,研发出一种导弹拦截系统.但是这种导弹拦截系统有一个缺陷:虽然它的第一发炮弹能够到达任意的高度,但是以后每一发炮弹都不能高于前一发的高度.某天,雷达捕捉到敌国的导弹来袭 ...

  4. python pytesser 的安装

      安装包: 需要安装的包主要有两个: PIL 和 pytesser . PIL模块的安装不多说 pytesser 模块的安装: 下载后得到 "pytesser_v0.0.1.zip&quo ...

  5. UITableView 编辑模式(增加-删除-移动---自定义左滑 title)

    - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, typica ...

  6. git 由http切换成git

    项目中经常会遇到http 的git 协议为了安全切换成ssh 的git 协议. 这个时候,只要使用如下命令变更 remote 字符串就好了. git remote set-url origin git ...

  7. c/c++重定向输入输出

    #define Local #include <iostream> #include <cstdio> //#include <stdio.h> using nam ...

  8. 本地存储和cookies之间的区别

  9. iOS开发之JSON & XML

    1.概述 JSON (1) 作为一种轻量级的数据交换格式,正在逐步取代XML,成为网络数据的通用格式 (2) 基于JavaScript的一个子集 (3) 易读性略差,编码手写难度大,数据量小 (4) ...

  10. winow7安装django 1.9.1

    1.下载django https://www.djangoproject.com/download/ 2.解压,并到该目录下 执行 python setup.py install 3.验证是否安装成功 ...