SOURCE

console 命令行工具 X clear

                    
>
console
Vue.directive('integer', {
  bind: function (el) {
    el.handler = function () {
      let value = el.value.replace(/\D+/, '')
      el.value = value
      
      let event = document.createEvent('MutationEvents')
      event.initMutationEvent('input', false, true)
      el.dispatchEvent(event)
      el.dispatchEvent('input', value)
    }
    el.addEventListener('input', el.handler)
    // el.addEventListener('blur', el.handler)
  },
  unbind: function (el) {
    el.removeEventListener('input', el.handler)
    // el.removeEventListener('blur', el.handler)
  }
})

new Vue({
  el: '#test',
  data () {
    return {
      a: ''
    }
  },
  methods: {
    showData () {
      console.log('a', this)
    }
  }
})

<script src="//cdn.bootcss.com/vue/2.2.1/vue.js"></script>
<div id="test">
  <span>指令v-integer做整形限制。通过修改el.value不能同步到双向绑定的数据上。但是又不想每个字段单独做判定。</span><br />
  <input type="text" name="a" v-integer="changeValue" v-model="a"/> 
  <span>{{a}}</span><br />
  <button @click="showData">show data</button>
</div>