input反应慢 vue_vue 输入框速度慢的问题

这是我对例子写的注释:

Vue.component('currency-input', {

template: '\

\

$\

ref="input"\ //注册为input,是DOM的节点元素

v-bind:value="value"\ //v-model的value(也是prop)

v-on:input="updateValue($event.target.value)"\ //封装更新value的函数

>\

\

',

props: ['value'], //父组件将绑定的value传给子组件

methods: {

// 不是直接更新值,而是使用此方法来对输入值进行格式化和位数限制

updateValue: function (value) {

var formattedValue = value //对值进行处理

// 删除两侧的空格符

.trim()

// 保留 2 小数位和2位数

.slice(0, value.indexOf('.') + 3)

// 如果值不统一,手动覆盖以保持一致,为了保持输入框显示内容跟格式化内容一致

if (formattedValue !== value) {

//因为注册是一个input元素,所以this.$refs 就是input元素

this.$refs.input.value = formattedValue

}

//手动触发input事件,将格式化后的值传过去,这是最终显示输入框的输出

this.$emit('input', Number(formattedValue))

}

}

})

//实例化vue实例的

new Vue({

el: '#aa', //要绑定一个vue实例,例如包裹一个id为aa的div

data:{

price:'' //v-model要有数据源

}

})

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值