vue的ref属性获取/设置标签的样式

Ace.三阶斗尊

已于 2022-11-26 16:27:16 修改

阅读量3.4w

点赞数 2

分类专栏：前端vue 文章标签： Vue ref el

于 2019-03-14 10:34:56 首次发布

本文链接：https://blog.csdn.net/qq_42231156/article/details/88547360

版权

前端vue 专栏收录该内容

57 篇文章 3 订阅

订阅专栏

添加小程序，兑换各种视频教程/数据资源。

1. 获取标签的宽高：this.$refs.image.clientHeight/clientWidth。

2. 设置标签的宽高：this.$refs.content.$el.style.top="12px"

<div >
    <div ref="image" class="image"></div>
    <div ref="content" class="content"></div>
</div>

<style>
    .image{
        width:100%;
        height:0;
        padding-top:70%;
    }
    .content{
        position:absolute;  
        width:100%;
        top:0;
        left:0;
        right:0;
        bottom:0;  
    }
    
</style>

<script>
    export default{
        mounted(){
            setTimeout(()=>{
                this.$refs.content.$el.style.top=`${this.$refs.image.clientHeight}px`
            },20)
        }
    }

</script>