学习记录
Vue动态设置Dom元素宽高
需求: slider侧边栏是宽度是动态的,使用jquery可以操作dom元素,设置宽高,但vue是避免操作dom的<template> <div class="slider"> <h1>Hamy</h1> </div></template><script>...
2019-11-04 11:07:34
4750
                <p>&nbsp;<strong>需求:</strong></p> 

     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>