H5W3
当前位置:H5W3 > 其他技术问题 > 正文

vue.js 如何动态设置div的样式(宽度)?

图片描述
需求如图: 当点击下方的数字条时,上面的两个大div盒子的宽度会响应发生改变。

我是在对应的盒子设置:style="widthChange"做属性绑定,然后在data中定义widthChange对象,对应宽度设置百分比。但发现widthChange对象中没办法做计算,不能动态修改宽度。

所以要怎么办才可以动态修改盒子的宽度呢?

回答:

我是在对应的盒子设置:style=”widthChange”做属性绑定,然后在data中定义widthChange对象,对应宽度设置百分比。但发现widthChange对象中没办法做计算,不能动态修改宽度。

不要在data中定义widthChange对象,使用computed,参考:https://cn.vuejs.org/v2/guide…

回答:

根据图我将你的宽带假设为100%,等分30份
先在data里设置一个变量 num , 点击按钮改变这个num的值.

<div :style="'width:'+ num * 3.3 +'%;'"></div>  
<div :style="'width:'+ (100 - num * 3.3) +'%;'"></div>  

如果你觉得99.9的时候有一丝的边不舒服,你可以改成3.4,我感觉有白边会更好,提示用户你这个一整块div其实分两块。

回答:

<div v-bind:style="{width: widthData}"></div>
widthData 可以在data中定义。
图片描述

本文地址:H5W3 » vue.js 如何动态设置div的样式(宽度)?

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址