SOURCE

Vue.directive('integer', {
  bind: function (el, binding, vnode) {
    // console.log(vnode)
    el.handler = function (e) {
      var val = e.target.value
      var newVal = val.replace(/\D+/, '')
      if (val == newVal) return
      console.log('newVal', newVal)
      console.log('oldval', val)
      e.target.value = newVal
      
      let event = document.createEvent('MutationEvents')
      event.initMutationEvent('input')
      el.dispatchEvent(event)
    }
    el.addEventListener('change', el.handler)
  },
  unbind: function (el) {
    el.removeEventListener('change', el.handler)
  }
})

var vm = new Vue({
  el: '#test',
  data () {
    return {
      a: ''
    }
  },
  methods: {
    showData () {
      console.log('a', this)
    },
    foo (val) {
      return val + '111'
    }
  }
})

<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 v-model="a"/> 
  <span>{{a}}</span><br />
  <button @click="showData">show data</button>
</div>