1. 程式人生 > >Vue 的資料繫結,資料操作

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需要深入研究下,研究好了在分享給大家。