vue如何获取指定元素

目录
  • 如何获取指定元素
  • 点击获取相应元素

如何获取指定元素

在想要获取元素上添加“ref”  ref="scroll"  scroll为函数名

<div ref="scroll">vue获取指定元素</div>
 xiaFn:function(){
    console.log(this.$refs.scroll)
 }

点击获取相应元素

在vue中通过点击事件获取上一个标签、父标签、第一个子标签等元素。

以下元素都是以所点击的元素进行查找 

  • e.target 获取当前点击的元素
  • e.currentTarget 获取绑定事件的元素
  • e.currentTarget.previousElementSibling 获取前(上)一个元素
  • e.currentTarget.parentElement 获取父元素
  • e.currentTarget.firstElementChild 获取第一个子元素
  • e.currentTarget.nextElementSibling 获取后(下)一个元素
  • e.currentTarget.getAttributeNode('class') 获得点击元素的class属性
<div class="box_home">
  box_home
  <div class="box_pre">box_pre</div>
  <div class="box" @click="eleclick($event)">
    <div class="box_item">box_item</div>
    <div class="box_item2">box_item2</div>
  </div>
  <div class="box_next">box_next</div>
</div>
eleclick(e){
  console.log("当前点击的元素");
  console.log(e.target);
  console.log("上一个标签");
  console.log(e.currentTarget.previousElementSibling);
  console.log("父标签");
  console.log(e.currentTarget.parentElement);
  console.log("第一个子标签");
  console.log(e.currentTarget.firstElementChild);
  console.log("下一个标签");
  console.log(e.currentTarget.nextElementSibling);
  console.log("绑定事件的标签");
  console.log(e.currentTarget);
  console.log("获得点击元素的class属性");
  console.log(e.currentTarget.getAttributeNode('class'));
}

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue3使用自定义hooks获取dom元素的问题说明

    目录 使用自定义hooks获取dom元素问题 分享下楼主自己的观点 vue获取/操作组件的dom元素 下面是我的代码内容(非全部内容) 最后总结 使用自定义hooks获取dom元素问题 在自定义hooks的onMounted事件里面 获取ref元素,组件调用hooks的时候必须要传递响应式对象. 分享下楼主自己的观点 代码如下 <script> // demo.vue import { defineComponent, ref } from 'vue' import useBars from

  • vue 获取元素额外生成的data-v-xxx操作

    需求描述:由于样式中使用了scoped,所以编译后标签对中生成data-v-xxx属性.在[.dialog_content]的div中 动态添加元素节点p和span时,也需要给元素节点添加data-v-xxx属性.由于data-v-xxx属性是会变化的,那如何获取它,添加在动态添加的元素节点中呢?本博客将给出解决方案. [解决方法] 获取属性名[document.getElementById("dialog_submit").attributes[0].name] 设置属性[nodeP

  • vue第一次获取不到元素的解决方法记录

    前言 vue中第一次获取不到元素的解决办法,是否经常第一次点击弹窗按钮,获取弹窗中的元素.打开弹窗获取元素为空,要第二次才能获取. 一.更新dom后获取 this.$nextTick(callback) methods: { play() { //获取元素 console.log($('#video')); this.$nextTick(function() { //获取元素 console.log($('#video')); }); } } 二.通过定时器获取 setTimeOut(fn, 0

  • vue.js click点击事件获取当前元素对象的操作

    Vue.js可以传递$event对象 <body id="app"> <ul> <li v-on:click="say('hello!', $event)">点击当前行文本</li> <li>li2</li> <li>li3</li> </ul> <script> new Vue({ el: '#app', data: { message: 'He

  • vue类名如何获取动态生成的元素

    目录 类名获取动态生成的元素 如何获取并操作dom元素 类名获取动态生成的元素 首先注意的是,该元素必须在id为app这个元素里面  new Vue({    el: "#app",   }) 其次是由于动态生成的,想获取到该元素,需要在created里使用nextTick. 并且可以 $(’.circle’ + i)拼接想要的元素类名.   this.$nextTick(() => {       for (var i = 1; i < this.carlist.leng

  • vue实现动态给id赋值,点击事件获取当前点击的元素的id操作

    :id绑定 :id="'a_'+index" 输出的id为a_0,a_1..... <div v-for="(item,index) in list" :key="index" > <div :id="'a'+index" @click="b(index)">哈哈哈</div> </div> 然后在vue的实例中就可以拿到对应的id b(index){ thi

  • vue如何获取指定元素

    目录 如何获取指定元素 点击获取相应元素 如何获取指定元素 在想要获取元素上添加“ref”  ref="scroll"  scroll为函数名 <div ref="scroll">vue获取指定元素</div>  xiaFn:function(){     console.log(this.$refs.scroll)  } 点击获取相应元素 在vue中通过点击事件获取上一个标签.父标签.第一个子标签等元素. 以下元素都是以所点击的元素进行查找

  • 解决vue项目获取dom元素宽高总是不准确问题

    dom元素内部内容是动态的,重置数据后直接获取宽高总是不准确: this.$refs.editor[0].offsetHeight; 原因:重置数据后获取dom元素宽高时,dom元素还未渲染完毕: 解决方法:利用Vue.nectTick(callback) this.$nextTick(() => { this.$refs.editor[0].offsetHeight; }) Vue.nectTick() 是在下次DOM更新循环结束之后执行延迟回调 补充知识:vue 获取 指定元素的高度宽度等(

  • JavaScript获取指定元素位置的方法

    本文实例讲述了JavaScript获取指定元素位置的方法.分享给大家供大家参考.具体如下: 复制代码 代码如下: function showpane() {   var self = document.getElementById("eID");   var left = self.getBoundingClientRect().left + document.documentElement.scrollLeft;   var top = self.getBoundingClientR

  • 原生javascript实现获取指定元素下所有后代元素的方法

    本文实例讲述了原生javascript实现获取指定元素下所有后代元素的方法,分享给大家供大家参考.具体实现方法如下: 过去常用的循环递归的方式显得非常的麻烦,下面就分享一个比较简单的方式,使用原生的javascript方法即可实现此功能. 代码实例如下: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author&q

  • vue如何获取自定义元素属性参数值的方法

    vue如何获取自定义元素属性参数值的方法

    偶尔还是会陷入到DOM操作上面去,其实你应该关心的是数据传递,而不是操作DOM.如果你是想获取data-num的数据,可以这样写: <span @click="getData($event,'21')">55</span> getData:function (e,num) { console.log(num) } 这样就可以取到这个值了,如果你是确实想操作DOM,那你可以这样写: <span data-num="21" ref=&quo

  • 使用pymysql查询数据库,把结果保存为列表并获取指定元素下标实例

    我就废话不多说了,大家还是直接看代码吧! from pymysql import * from qmp.config import * def main(): conn = connect(host=HOST, port=3306, database=DATABASE, user=USER, password=PASSWORD, charset='utf8') cs1 = conn.cursor() sql1 = 'SELECT deal_name from ods_project_crawle

  • vue递归获取父元素的元素实例

    使用递归查找父元素,知道查到想要的元素,然后return getParentTag(startTag) { var self = this; // 传入标签是否是DOM对象 if (!(startTag instanceof HTMLElement)) return; // 父级标签是否是body,是着停止返回集合,反之继续 let nodeName = ""; if (startTag.parentElement) { nodeName = startTag.parentElemen

  • 如何在Vue中获取DOM元素的实际宽高

    如何在Vue中获取DOM元素的实际宽高

    目录 前言 一.获取元素 二.获取元素宽高 补充:vue项目获取dom元素宽高总是不准确 总结 前言 最近使用 D3.js 开发可视化图表,因为移动端做了 rem 适配,所以需要动态计算获取图表容器的宽高,其中涉及到一些原生DOM API的使用,避免遗忘这里总结一下. 一.获取元素 在 Vue 中可以使用 ref 来获取一个真实的 DOM 元素. 为了保险起见,所有的 DOM 操作建议都放在 $nextTick() 方法中. <template> <div class="box

  • 在vue中获取dom元素内容的方法

    在vue中可以通过给标签加ref属性,就可以在js中利用ref去引用它,从而操作该dom元素,以下是个例子,可以当做参考 <template> <div> <div id="box" ref="mybox"> DEMO </div> </div> </template> <script> export default { data () { return { } }, mounted

  • vue获取dom元素注意事项

    mounted(){ setTimeout(()=>{ this.contentToggle(); },1000) }, methods:{ contentToggle(){ console.log(this.$refs.bodyFont.offsetHeight); } } vue想要获取dom元素的高,一般情况下我们都可以想到写在mounted函数里,即dom加载完再获取,但是结果并不如我们所想,又想到用一个 this.$nextTick(()=>{ //函数 }) 来获取,发现根本没用啊

随机推荐