vuejs style 计算属性 样式绑定 动态属性

目标

动态设置进度条宽度

文档
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