Vue 自定义指令处理千分符怎么写
时间: 2024-02-04 21:03:59 浏览: 88
vue自定义指令实现方法详解
5星 · 资源好评率100%
可以通过自定义 Vue 指令来处理千分符。实现方式如下:
1. 创建一个名为 `thousands` 的自定义指令:
```
Vue.directive('thousands', {
bind: function (el, binding) {
// 获取输入框的值
let value = el.value;
// 格式化数字,添加千分符
value = value.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
// 更新输入框的值
el.value = value;
}
})
```
2. 在需要处理千分符的输入框上使用 `v-thousands` 指令:
```
<input type="text" v-model="myNumber" v-thousands>
```
现在,当用户在该输入框中输入数字时,自定义指令会自动将数字格式化为带有千分符的形式。
阅读全文