vue如何动态用js给html添加一个属性或者样式?

JustiCe
  • 44

问题描述

一般我们动态创建class,都是在循环的时候根据每一项的数据来判断的,现在我有一个table,table的行和列全是根据数据动态创建的,其中有几列是Input,(一个对象就是一行,列就是对象中的key, Input输入值就是这个key对应的值)我需要根据Input的输入完成之后,进行验证,验证不对该列的Input就要变红色。

这个时候可以根据绑定的列值写一个methods,然后样式通过这个methods来处理,但是这个时候,class在一开始Input为空的时候就会变红,但我需要在输入后再变红,该怎么做呢?

相关代码

<tr v-for="(item,index) in tableList" :key="item.guid">
    <td v-for="l in listDataOption" :key="l.ID" :class="{noedit:l.CtmChr02 == 7}">
        <input :disabled="leave" v-model="item[l.CtmChr01]" class="fz14" :class="{valid:checkValidClass(item,l.CtmChr01)}" v-if="l.CtmChr02 == 1 || l.CtmChr02 == 6"
        type="text" value="" :placeholder="'请输入'+l.CtmChr01" @tap="isSelected(l,item)" @input="clearValid(item)"
     @blur="checkValid(item,l.CtmChr01)" focus />
    </td>
</tr>
methods:{
                    checkValidClass(item, p) {
                        var valid = false
                        if (item[p] == '') {
                            if (p != 'checked' && p != 'valid') {
                                item.valid = true
                                valid = true
                                return valid
                            }
                        } else {
                            if (p == '手机号') {
                                console.log(p)
                                if (!/^1\d{10}$/.test(item[p])) {
                                    item.valid = true
                                    var valid = true
                                    return valid
                                }
                            } else if (p == '库存') {
                                if (!/^[0-9]+$/.test(item[p])) {
                                    item.valid = true
                                    valid = true
                                    return valid
                                }
                            }
                        }
                        return valid
                    }
                },

有没有什么方法可以直接动态添加属性或样式?

如果不行的话,我估计得把格式进行转换一下才能玩下去把,
比如改造成

row: {
   cell: [
        {key: '联系人', value: '赵嘿嘿', valid: false}, 
        {key: '手机号', value: '1234568', valid: false}
   ]
}

最后保存的时候再转回来???

回复
阅读 5.4k
1 个回答

抱歉,没能很仔细的看完您的问题。但根据标题,我根据我的理解,提供一个大概的思路。
首先,我的观点是:不要尝试在vue中使用js改变某元素的样式!请使用数据去驱动元素。

比如<input type="number" :class="MyValue|MyClassFilter">
其中,MyValue是个普通的Data。MyClassFilter是个过滤器。

举个例子,过滤器可以这样写:

filters:{
    MyClassFilter:function(_val){
        if(_val === 1){
            return 'my-class-1';
        }else{
            return 'my-class-2';
        }
    }
}

这时,my-class-1my-class-2分别对应一个Class:

.my-class-1{
    color: red;
}

.my-class-2{
    color: blue;
}

这样,只需要监听 input 的输入事件,并且在输入事件中,改变 MyValue 的值即可。

PS:当然,这个过滤器,也可以使用计算属性代替,但看你的需求,还是过滤器比较好。

宣传栏