（七）在Vue中获取DOM对象

川长思鸟来 2022-05-26 12:41 143阅读 0赞

在Vue中我们也可以获取DOM对象

利用特殊特性ref和实例属性vm.$refs实现在Vue中获取到特定的DOM对象

1）首先在子组件的<template>中某个元素节点上声明ref特性，如下面是在goods.vue文件中的<template>中的定义：ref="menuWrapper"

<div class="menu-wrapper" ref="menuWrapper">
    </div>

2）然后再goods.vue中的<script>标签里面输出语句里面的methods属性中定义一个方法，在该方法里面去引用上面的DOM节点：this.$refs.menuWrapper

<script>
      import BScroll from 'better-scroll'; //引进这个实现上下滑动的插件
      export default {
    
          data(){
            return {
              goods:[]
            }
          },
          created(){//在这个时刻向后台请求数据
            this.$http.get('/api/goods').then((res) => {
              res = res.body;
              if( res.errno === ERR_OK ){
                this.goods = res.data;
                this.$nextTick(() => {
                  this._initScroll();
                });
              }
            });
           
          },
          methods:{
            _initScroll(){
              //初始化需要滚动的对象
    
              this.menuScroll = new BScroll(this.$refs.menuWrapper,{
                click:true
              });
    
            }
          }
      }
    </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，143人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue学习 --- 在vue中去使用真实dom元素

由于vue不建议使用使用真实dom元素，但是必要的时候，我们可以必须要用，因此,vue为我们提供了ref。我们通过，在组件的html部分。 <template>

拼搏现实的明天。/ 2023年10月13日 07:23/ 0 赞/ 14 阅读

相关 Vue 3 获取 DOM

Vue 3 获取 DOM 文章目录 Vue 3 获取 DOM 1、方式一：自动绑定代码示例打印结果

冷不防/ 2023年09月26日 20:18/ 0 赞/ 128 阅读

相关 vue ref在v-for中获取不到dom

问题描述： v-for中使用ref： <div v-for="(item,index) in list" :key="index" ref="childName">

川长思鸟来/ 2023年07月19日 12:23/ 0 赞/ 26 阅读

相关如何在vue项目中获取dom节点

一、问题由来在vue项目中，我需要获取一个dom的offsetHeight、scrollHeight等，但是不知道如何在vue中获取一个dom节点。毕竟是新手，所以在看

曾经终败给现在/ 2023年06月13日 08:47/ 0 赞/ 3 阅读

相关 Vue项目中稳健的获取dom元素

1、获取Element的弹框中的Dom元素由于弹框由v-if控制，在初始页面渲染的时候，并不存在该Dom元素，所以在mounted中，获取不到该弹框的Dom元素

迈不过友情╰/ 2023年06月05日 12:52/ 0 赞/ 23 阅读

相关 Vue.js中$refs{}获取DOM元素

如果我们想获取DOM元素，一般使用js中的`document.querySelector`来获取这个dom节点，然后在获取元素的值，现在Vue提供给我们一种更便捷的方式来获取D

以你之姓@/ 2022年12月22日 10:00/ 0 赞/ 337 阅读

相关（七）文档对象模型（DOM）（下）

1.读写数据 setAttribute()添加属性，getAttribute()获取属性，removeAttribute()删除属性。 2.显示和隐藏修改DOM

╰半橙微兮°/ 2022年09月22日 03:48/ 0 赞/ 224 阅读

相关（七）在Vue中获取DOM对象

在Vue中我们也可以获取DOM对象利用特殊特性ref和实例属性vm.$refs实现在Vue中获取到特定的DOM对象 1）首先在子组件的<template>中某个元素节点上

川长思鸟来/ 2022年05月26日 12:41/ 0 赞/ 144 阅读

相关 vue中获取并操作dom元素

获取dom元素可以使用 elementList = document.querySelectorAll(selectors);//获取多个dom元素如ul中的li

墨蓝/ 2022年05月21日 03:45/ 0 赞/ 280 阅读

相关 vue中使用ref获取dom对象

（1）在标签上绑定一个ref属性，该属性可以获得该标签的dom对象 <div id="app"> <div ref="hi" @click="

冷不防/ 2022年04月16日 00:06/ 0 赞/ 464 阅读