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)
},
unbind: function (el) {
el.removeEventListener('input', 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>