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

    千次阅读 2020-08-12 19:00:53
    方法一:通过绑定函数传参直接获取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.***.属性名】 获取相关属性的值:

     

    展开全文
  • 原因:重置数据后获取dom元素宽高时,dom元素还未渲染完毕; 解决方法:利用Vue.nectTick(callback) this.$nextTick(() => { this.$refs.editor[0].offsetHeight; }) Vue.nectTick() 是在下次DOM更新循环结束之后...
  • vue获取DOM元素并设置属性

    千次阅读 2019-10-01 19:47:50
    这里我想到了2个方法: 方法一: 直接给相应的元素加id,然后再document.getElementById("id");获取,然后设置相应属性或样式 方法二: 使用ref,给相应的元素加ref=“...

    这里我想到了2个方法:

    方法一:

    直接给相应的元素加id,然后再document.getElementById("id");获取,然后设置相应属性或样式

    方法二:

    使用ref,给相应的元素加ref=“name” 然后再this.$refs.name获取到该元素

     

    注意:在获取相应元素之前,必须在mount钩子进行挂载,否则获取到的值为空,

         如果是给子组件加id并修改自定义属性,则直接会加载改子组件对应的外层div上,并不会改变该子组件原本的自定义属性的值

        如果给子组件加ref,然后获取到该DOM元素之后改变相应的自定义属性的值,vue会报错:

     Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "title"

     


    更多专业前端知识,请上 【猿2048】www.mk2048.com
    展开全文
  • 主要介绍了vue如何获取自定义元素属性参数值的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • Vue获取DOM元素并修改属性

    万次阅读 2019-07-16 13:48:23
    Vue获取DOM元素 Vue获取DOM元素有两种方法 直接给相应的元素加id,然后再使用document.getElementById("id");获取 使用ref,给相应的元素加ref=“name”然后再使用this.$refs.name获取到该元素 Vue获取到元素并修改...

    Vue获取DOM元素

    Vue获取DOM元素有两种方法

    1. 直接给相应的元素加id,然后再使用document.getElementById("id");获取
    2. 使用ref,给相应的元素加ref=“name”然后再使用this.$refs.name获取到该元素

    Vue获取到元素并修改属性或者样式

    使用上述的第二种方法,获取到元素,然后使用this.$refs.元素元素的ref对应的name.style.属性名(样式或者其他的属性名) = “你要设置的值”或者元素的ref对应的name.属性名(样式或者其他的属性名) = “你要设置的值”``,如this.$refs.more.style.bottom = “20px”;就是将refnamemore的元素的bottom属性改为20px`

    注意

    1. 在获取相应元素之前,必须在mounted生命周期进行挂载,否则获取到的值为空;
    2. 如果是给子组件加id并修改自定义属性,则直接会加载该子组件对应的外层div上,并不会改变该子组件原本的自定义属性的值;
    3. 如果给子组件加ref,然后获取到该DOM元素之后改变相应的自定义属性的值,vue会报错:Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "title"
    展开全文
  • <div id="app"> <button drug_code="100" @click="getData($event)">点</button> </div> methods : { getData (e) { console.log(e.target.getAttribute(‘drug_code‘));...}
  • vue获取dom元素注意事项

    千次阅读 2020-12-24 05:43:36
    mounted(){setTimeout(()=>{this.contentToggle();},1000)},methods:{...}}vue想要获取dom元素的高,一般情况下我们都可以想到写在mounted函数里,即dom加载完再获取,但是结果并不如我们所想,又想到用一...
  • vue.js 是数据绑定的框架,大部分情况下我们都不需要直接操作 DOM Element,但在某些时候,我们还是有获取DOM Element的需求的;  在 vue.js 中,获取某个DOM Element常用的方法是将这个元素改成一个组件 ...
  • 方法一: HTML <div id="app"> <button @click="getData($event,'100','666','777')">点我</button> <... // 输出 这个点击事件下面的所有属性 console.log(num); // 输出 100
  • vue获取dom元素内容

    千次阅读 2020-12-19 16:54:35
    通过ref来获取dom元素vue官网上对ref的解释ref被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的$refs对象上。如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素; 如果用在子组件上,引用就指向...
  • 一、获取dom元素节点 为元素添加一个ref属性属性的值可任取 以作为该节点的引用名 ref即为reference(引用)的前三个字母 This is title This is content 用Vue实例中的自带的$refs属性获取元素 用预先定义好的...
  • vue获取dom元素高度的方法

    千次阅读 2020-01-02 11:50:40
    本文转载自:...获取高度: <div ref="自定义名称" ></div>要在钩子mounted里面dom结构生成后去获取dom的高度,宽度,修改样式等操作!!! mounted() { let h = window.innerH...
  • 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渲染...
  • //获取元素样式值,为元素ref="ele"(在样式里面写死了的高度) var heightCss = window.getComputedStyle(this.$refs.ele).height; // ?px //获取元素内联样式值 var heightStyle =this.$refs.ele.style.height; //...
  • 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....

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 29,810
精华内容 11,924
关键字:

vue获取dom元素的属性

vue 订阅