Vue动态设置Dom元素宽高

时间:2022-01-11 13:02:41

需求:

slider侧边栏是宽度是动态的,使用jquery可以操作dom元素,设置宽高,但vue是避免操作dom的

<template>
<div class="slider">
<h1>Hamy</h1>
</div>
</template>
<script>
export default{
name:'index',
data(){
return{
sliderStyle:{
width:'240px'
}
}
}
}
</script>

思路:

通过给元素绑定style,在methods中通过改变this.sliderStyle.width来设置动态宽度

<template>
<div class="slider" :style="sliderStyle">
<h1>Hamy</h1>
</div>
</template>