目标
动态设置进度条宽度
文档
https://cn.vuejs.org/v2/guide/class-and-style.html#绑定内联样式
https://cn.vuejs.org/v2/guide/computed.html
方法一
绑定样式:style
read_page、total_page是两个参数
<view class="filled" :style="{ width: read_page / total_page * 100 + '%'}"></view>
方法二
注意
- :style= 的方法countWidth后不能加()
- 使用 computed ，不是methods
- return 'width: 20%; height: 30px'，不是return {width: 20%; height: 30px }
<view class="filled" :style="countWidth"></view>
computed: {
countWidth: function () {
return 'width: 20%; height: 30px'
}
}
注意：计算表达式不能用 80%（会报错），要用0.8
错：300 * 80%
对： 300 * 0.8
参考
https://juejin.im/post/5d5b87bc6fb9a06b1417e651
https://blog.csdn.net/freedomVenly/article/details/80752215
https://segmentfault.com/q/1010000008835283
网友评论