vue.js 如何动态设置div的样式（宽度）？

Question

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

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

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

Answer 1

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

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

Answer 2

根据图我将你的宽带假设为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其实分两块。

Answer 3

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