vue 输入框去除-
时间: 2024-07-16 09:01:30 浏览: 45
Vue 中,如果你想在输入框(v-model绑定的元素)中自动移除 `-` 符号,你可以通过自定义指令(custom directive)或者过滤器(filter)来实现。这里我将提供两种方法:
**方法一:使用自定义指令**
创建一个全局的 Vue 自定义指令,比如 `removeDash`,其作用是在用户输入时自动去掉 `-`。
```javascript
Vue.directive('removeDash', {
inserted: function (el, binding) {
el.addEventListener('input', function (e) {
if (e.target.value.includes('-')) {
e.target.value = e.target.value.replace('-', '');
}
});
},
});
```
然后在模板上应用这个指令到需要去除非数字字符的输入框上:
```html
<input type="text" v-model.trim remove-dash />
```
**方法二:使用过滤器**
你可以在计算属性或者模板的绑定表达式中添加一个过滤器,如 `numberFilter`:
```javascript
Vue.filter('numberFilter', function (value) {
return value.replace(/\-/g, '');
});
// 使用
<input type="text" v-model.numberFilter />
```
对于这两种方法,当你在输入框中输入包含 `-` 的内容时,它们都会自动移除该字符。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)