vue 過濾器如何賦值

v-model.number="a" 可以用嗎

不知道你想干嘛，不過如果只是為了限制只能輸入數(shù)字，直接用 <input type="number"> 就可以了。

我的做法是將此封裝為一個(gè)自定義的Input組件
接收 value，type 值，input觸發(fā)change事件后驗(yàn)證并轉(zhuǎn)換字符串的格式，然后重新賦值,觸發(fā)v-model更新

可參考，根據(jù)你的項(xiàng)目改造即可

組件代碼

<template>

  <el-input :type="type" v-model="currentValue" :maxlength="maxlength" :disabled="disabled" :class="small?'inline-small-input':''" :placeholder="placeholder">
    <slot name="prefix" slot="prefix"></slot>
    <slot name="suffix" slot="suffix"></slot>
    <slot name="prepend" slot="prepend"></slot>
    <slot name="append" slot="append"></slot>
  </el-input>
</template>

<script>
export default {
  props: {
    value: {
      type: [String, Number]
    },
    type: {
      type: String,
      default: 'text'
    },
    placeholder: {
      type: String
    },
    maxlength: {
      type: Number
    },
    small: {
      type: Boolean,
      default: false
    },
    validate: {
      type: String,
      default: '' // number float
    },
    fixed: {
      type: Number,
      default: -1
    },
    disabled: {
      type: Boolean,
      default: false
    },
    min: {
      type: Number
    },
    max: {
      type: Number
    }
  },
  data() {
    return {
      currentValue: null
    }
  },
  watch: {
    value: {
      handler(val) {
        if (val !== this.currentValue) {
          this.currentValue = val
        }
      },
      immediate: true
    },
    currentValue(val, oldVal) {
      this.$nextTick(() => {
        this.currentValue = this.convert(val)
        this.$emit('input', this.currentValue)
      })
    }
  },
  methods: {
    convert(val) {
      switch (this.validate) {
        case 'number':
          val = parseInt(this.currentValue) || 0
          break
        case 'z-number':
          val = Math.max(parseInt(this.currentValue) || 0, 0)
          break
        case 'f-number':
          val = Math.min(parseInt(this.currentValue) || 0, 0)
          break
        case 'float':
          val = parseFloat(this.currentValue) || 0
          val = this.fixed > -1 ? val.toFixed(this.fixed) : val
          break
        case 'z-float':
          val = Math.max(parseFloat(this.currentValue) || 0, 0)
          val = this.fixed > -1 ? val.toFixed(this.fixed) : val
          break
        case 'f-float':
          val = Math.min(parseFloat(this.currentValue) || 0, 0)
          val = this.fixed > -1 ? val.toFixed(this.fixed) : val
          break
        default:
          break
      }
      if (this.validate !== '') {
        if (typeof this.max === 'number') {
          val = Math.min(this.max, val)
        }
        if (typeof this.min === 'number') {
          val = Math.max(val, this.min)
        }
      }
      return val
    }
  }
}
</script>

使用

<v-form-input v-model="inputValue" validate="z-number" :min="1" :max="1"/>