Vue的动态样式修改

Vue的动态样式修改
1.利用计算属性，computed写入（多种情况）

// 判断input的的padding-right的长度(70,50,10)
            inputStyle () {
                return (item) => {
                    const style = {};
                    if (item.percentageStyle) {
                        style['percentageStyle-style-none-padding-right'] = true
                    } else if (!item.percentage) {
                        style['percentage-style-none-padding-right'] = true;
                    }
                    return style;
                }
            }

1.1 引入

:class="inputStyle"

2. 两种利用三目

:class="{ 'percentage-style': item.percentage ? false : true }"

3.同时传入动态样式修改，以及对特殊的样式进行自定义修改

// 同时写，用对象的写法
:class="{ 'percentage-style-none-padding-right': item.percentage,
          [`form-unqiue-${item.key}`]: true}"
// 单独对特殊的进行引入
:class="`form-unqiue-${item.key}`"

3.1 页面使用