Vue 的数据绑定,数据操作

本人新学的Vue,在项目后期进入,在修改一个bug的时候,需要在input中设置必须为数字,且不能为负数。
input type= number,可以解决必须为数字
但是设置不能为负数的时候,出现了问题,因为input自带的min 和max 在form表单外不生效了。而且input的值是v-model绑定的data,根据vue正常思路是去修改this.data,但是有很多数据,就要给每个数据都设置判断,工作量太大。一直想找一个公共的方法
vue

<el-input class="tems_Input textNumber" min="1" type="Number" size="mini" @keyup.native="show('pingTime',$event)" v-model="nei.pingTime"/>

js

show(name,val) {
            let value = val.target.value;
            value = Math.round(value);
            if(value <= 0) {
                value = Math.abs(value);
            }
            this.$set(this,name,value);
        },

现在只需要每个输入框绑定这个show方法,传入参数即可
第一个参数是数据的名称,第二个参数是事件操作的对象
其中注意:$event必须放在后面,如果放在前面传的参数不对,其中原因还是不清楚,$set 和$event需要深入研究下,研究好了在分享给大家。

猜你喜欢

转载自blog.csdn.net/qq_34164814/article/details/81503034