精华内容
下载资源
问答
  • 本篇文章主要介绍了Vue获取DOM元素样式和样式更改示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 下面小编就为大家带来一篇vue获取DOM元素并设置属性的两种实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 本篇文章主要介绍了在vue获取dom元素内容的方法,可以通过给标签加ref属性,这里整理了详细的代码,有兴趣的可以了解一下
  • vue获取dom元素值

    万次阅读 2017-05-19 17:39:11
    1、通过refs来获取dom元素内容 2、需要利用到jq,但是不支持,学习vue.js,都说需要抛弃jq,否则会禁锢你的思想 通过refs方法ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。...

    1、通过refs来获取dom元素内容
    2、需要利用到jq,但是不支持,学习vue.js,都说需要抛弃jq,否则会禁锢你的思想


    通过refs方法

    ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素; 如果用在子组件上,引用就指向组件实例。这里主要是介绍在普通dom元素上使用。看下面的例子:

    无论是点击aa还是bb都能获取到类名为aa的元素值。

    HTML

    <div id="App">
         <div class="aa" ref="menuItem" @click="aa($event)">aa</div>
         <div @click="bb">bb</div>
    </div>
    

    JS

    <script>
         new Vue({
              el: '#App',
              methods: {
                   bb: function() {
                        var getMenuText = this.$refs.menuItem.innerText;
                        console.log(getMenuText);//aa
                   },
                   aa: function(e) {
                        var el = e.target;
                        console.log(el);//<div class="aa">aa</div>
                   }
              }
         })
    </script>
    

    通过jq方式

    个人见解:两种方式并用,感觉有点冗余。话不多说,看上面的例子,aa的点击事件

    var el = e.target;// 当前元素,可修改(利用jq,可获取到他的子元素)
    var el = e.currentTarget; //当前元素,不可修改(不能用此方法获取到他的子元素)
    
    展开全文
  • 主要介绍了vue获取dom元素注意事项及vue获取dom元素的内容,需要的朋友可以参考下
  • 原因:重置数据后获取dom元素宽高时,dom元素还未渲染完毕; 解决方法:利用Vue.nectTick(callback) this.$nextTick(() => { this.$refs.editor[0].offsetHeight; }) Vue.nectTick() 是在下次DOM更新循环结束之后...
  • 本篇文章主要介绍了详解在Vue中通过自定义指令获取dom元素 ,具有一定的参考价值,有兴趣的可以了解一下。
  • 方法一:通过绑定函数传参直接获取DOM元素自定义的 <div id="app"> <button @click="getData($event,'100')"></button> </div> methods : { getData(e,num) { console.log(num); // ...

    方法一:通过绑定函数传参直接获取DOM元素自定义的值

    <div id="app">
      <button  @click="getData($event,'100')"></button>
    </div>
    
    methods : {
       getData(e,num) {
            console.log(num);     //  100
       }
    }
    

    方法二:通过$ref属性获取

    <div id="app">
      <button data-num="100" ref="dataNum"  @click="getData($event)"></button>
    </div>
    
    methods : {
       getData (e) {
           console.log(this.$refs.dataNum.dataset.num);     //  100
       }
    }
    

    方法三:通过绑定函数传参,得到DOM元素,再得到自定义属性

    <div id="app">
      <button data-num="100" @click="getData($event)"></button>
    </div>
    
    methods : {
       getData (e) {
           console.log(e.target.getAttribute('data-num'));     //  100
       }
    }
    
    展开全文
  • Vue获取DOM元素的属性

    千次阅读 2018-11-21 15:52:00
    vue中如何获取DOM元素距离窗口顶部的呢? 1.通过$event获取 html: &lt;div class="sort-item" @click="showFilter($event)"&gt; {{currentFilter}} &lt;div class=...

     项目中需要做一个小弹层,如下图:

     

    我需要知道点击元素距离顶部的值,再计算弹层的top值,如下图:

     

    在vue中如何获取到DOM元素距离窗口顶部的值呢?

    1.通过$event获取

    html:

    <div class="sort-item" @click="showFilter($event)">
        {{currentFilter}}
        <div class="sort-icon">
            <i class="iconfont icon-shaixuan"></i>
        </div>
    </div>

     

    methods:

    showFilter: function ($event) {
        this.filterShow = true;
        this.popoverShow = true;
        this.filterPosTop = $event.currentTarget.getBoundingClientRect().top;
    },

     

    如下图:

     

    2.通过this.$refs.***获取

    1.目标DOM定义ref值:

     

    2.通过 【this.$refs.***.属性名】 获取相关属性的值:

     

    展开全文
  • vue中的ref是把当前dom元素 “ 抽离出来 ” ,只要通过 this.$refs就可以获取到 “set” ref=“up”> .set是我们要操作的dom对象,它的ref是 up @click=“Alert” 给父元素一个点击事件, 接下来我们来编写这个...
  • vue获取dom元素高度的方法

    千次阅读 2020-01-02 11:50:40
    本文转载自:...获取高度: <div ref="自定义名称" ></div>要在钩子mounted里面dom结构生成后去获取dom的高度,宽度,修改样式等操作!!! mounted() { let h = window.innerH...
    本文转载自:
    https://www.cnblogs.com/lhl66/p/7908133.html  作者:lhl66 转载请注明该声明。
    

    获取高度:

    <div ref="自定义名称" >

    </div>
    要在钩子mounted里面dom结构生成后去获取dom的高度,宽度,修改样式等操作!!!
     mounted() {
        let h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; //浏览器高度
        let topH = this.$refs.topInfo.offsetHeight;
        console.log()
        let tabH = this.$refs.tab.offsetHeight;
        console.log()
        let subH = this.$refs.subBtn.offsetHeight;
        console.log()
        let scrollHight = this.$refs.scroller.offsetHeight
        this.height = (h - topH - tabH - subH) + "px"
        //localStorage.setItem("access_token", '52ecda6ecb4a11e7bd2a00163e0891fd') //测试token
        this.queryData(0)
        let w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;//浏览器宽度  
    
      }   //获取dom元素高度通过在标签里面定义ref属性,用this.$refs.自定义名称.offsetHight;去获取。

    还有其他获取指定高度的方式:

    //获取元素样式值,为元素ref="ele"(在样式里面写死了的高度)
    var heightCss = window.getComputedStyle(this.$refs.ele).height; // ?px

    //获取元素内联样式值 var heightStyle =this.$refs.ele.style.height; // ?px

     

    展开全文
  • vue获取dom元素的几种方式

    千次阅读 2020-10-22 18:54:41
    获取dom元素:this.$refs.xx. 如图: mounted()时才能获取this.$refs.xx 获取dom标签:this.$refs.xx.$el $parent: 获取当前组件的父组件 $el: 获取当前组件的DOM元素 vm.$nextTick 什么时候用:在Vue渲染...
  • 一、获取dom元素节点 为元素添加一个ref属性 该属性的可任取 以作为该节点的引用名 ref即为reference(引用)的前三个字母 This is title This is content 用Vue实例中的自带的$refs属性获取元素 用预先定义好的...
  • vue获取DOM元素

    2020-01-11 11:15:13
    由于vue不推荐操作DOM节点所以最好不要使用原生的getElement方法 vue有一个reference属性...它能够获取DOM节点 在想要获取的节点上添加ref这个属性 ,这个节点就会被实例获取到 操作DOM节点 this.$refs.myp... ...
  • vue获取DOM元素并设置属性

    千次阅读 2019-10-01 19:47:50
    这里我想到了2个方法: 方法一: 直接给相应的元素加id,然后再document.getElementById("id");获取,然后设置相应属性或样式 方法二: 使用ref,给相应的元素加ref=“...
  • Vue 获取DOM元素 ,给DOM增加事件的特殊情况 给标签绑定ref属性 使用this.$refs.xxx 获取原生的jsDOM对象 ref属性不能重名 Vue.component('subCom',{ template:`<div class="subCom"></div>` }) ...
  • Vue获取DOM元素样式和样式更改

    千次阅读 2019-04-17 09:26:14
    Vue获取DOM元素样式和样式更改 在 vue 中用 document 获取 dom 节点进行节点样式更改的时候有可能会出现 ‘style’ is not definde的错误, 这时候可以在 mounted 里用 $refs 来获取样式,并进行更改: <template...
  • vue获取dom元素与修改样式详解

    千次阅读 2019-10-30 16:34:45
    vue中如何获取dom元素呢? 步骤详解 在标签上加上ref属性 如 : 在js中通过refs便可以获取dom如:this.refs便可以获取dom 如:this.refs便可以获取dom如:this.refs.refDemo 修改对应的样式名 如:this.$refs....
  • 问题描述:例如,一个倒计时组件为子组件,当父组件请求数据成功后,再调用倒计时组件开始倒计时,此时当发送请求后...当dom发生变化,更新后执行的回调,在回调函数中获取,并触发倒计时 父组件 <count-down ref="c
  • <template> <div class="app-container"> <el-button style="margin-top: 6px;" ref="btn" @click="getDOM()">...获取DOM元素</el-button> </div> </template> <script&...
  • //获取元素样式,为元素ref="ele"(在样式里面写死了的高度) var heightCss = window.getComputedStyle(this.$refs.ele).height; // ?px //获取元素内联样式 var heightStyle =this.$refs.ele.style.height; //...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 35,209
精华内容 14,083
关键字:

vue获取dom元素的值

vue 订阅