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>