SOURCE

console 命令行工具 X clear

                    
>
console
Vue.directive('float', {
  bind: function (el, binding, vnode) {
    el.handler = function (e) {
      // 保留几位小数
      var decimal = binding.arg || 2
      var val = e.target.value
      var newVal = val.replace(/[^0-9.]+/, '')
      // 刨除全部由点构成的情况
      if (/^\.*$/.test(newVal)) newVal = 0
      newVal = newVal || 0
      newVal = parseFloat(newVal).toFixed(decimal)
      if (val.toString() === newVal.toString()) return
      e.target.value = newVal
      let event = document.createEvent('HTMLEvents')
      event.initEvent('input', false, true)
      el.dispatchEvent(event)
    }
    el.addEventListener('change', el.handler)
  },
  unbind: function (el) {
    el.removeEventListener('change', el.handler)
  }
})

new Vue({
  el: '#test',
  data () {
    return {
      params: {
        a: ''
      },
      b: 'sssssssss'
    }
  },
  methods: {
    showData () {
      console.log('a', this)
    },
    changeValue (name, value) {
      console.log('name', name)
      console.log('value', value)
      let names = []
      if (name.indexOf('.')) {
        
      }
      this[name] = value
    }
  }
})

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