vue 过滤器如何赋值

Question

Vue.directive('numbers',{
  bind (el, binding) {
    el.oninput = function (data) {
      this.value = this.value.replace(/\D/g, '')
    }
  }
})

想用input事件，可是这样赋值不了给input框
需求是input框只能输入数字

<div v-numbers class="el-input">
      <input  type="text" v-model="a" >
</div>

我是这样要给指令的子元素加事件的，因为是要给el-input加指令，但是绑定不了

Answer 1

不知道你想干嘛，不过如果只是为了限制只能输入数字，直接用 <input type="number"> 就可以了。

Answer 2

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

Answer 3

我的做法是将此封装为一个自定义的Input组件
接收 value，type 值，input触发change事件后验证并转换字符串的格式，然后重新赋值,触发v-model更新

---

可参考，根据你的项目改造即可

组件代码

<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"/>