el-input等element元素使用v-model绑定值时过滤问题

最新推荐文章于 2025-05-27 11:04:23 发布

原创最新推荐文章于 2025-05-27 11:04:23 发布 · 2k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue #elementui

笔记专栏收录该内容

47 篇文章

订阅专栏

博客介绍了在Vue中使用Element元素时，对后台数据进行过滤或格式化的场景。以时间转换问题为例，当后台传递的时间数据与页面展示不一致时，可结合computed过滤绑定的值，el - input改动调用方法即可。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用element元素时，有很多场景是需要对后台拿到的数据进行过滤或者格式化的

比如：当后台传递到vue中时间转换问题，此时就需要过滤了

上代码

后台传递的数据，使用mainlist接收后，传递的时间invissuedate绑定到el-input，但是此时数据是后台传递的毫秒值时间或者后台处理过的时间，跟页面展示的时间或许不一致，

这种问题就需要结合computed来过滤绑定的值

el-input只需要改动调用方法即可

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

记录学习日常

关注关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

vue 高阶函数，v-model表单绑定

不是死水

07-16

827

一.高阶函数 1.filter（）创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。 const num = [10,20,30,50,100] // 1.filtle函数的使用创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。 let newNews = num.filter(function (n) { return n < 40 }) console.log(newNews); 2.ma

el-input赋值回显，校验未关闭解决办法

weixin_43925947的博客

04-29

2446

需求：一个输入框在用户focus的时候给一个选择的弹窗进行进行单选然后回显给当前页面的e-input输入框问题：每次回显的时候校验不通过解决办法：使用validate-on-rule-change 默认为true 改成false就好了解决代码 <el-form :model="ruleForm" :...

参与评论您还未登录，请先登录后发表或查看评论

el-input中对输入进行过滤内容

Ace_with_Yu的博客

06-28

6096

在项目中有时候要对用户的输入内容进行过滤，而不是做校验。 <el-input v-model="input" @input="e => input = inputMe(e)" placeholder="请输入内容"> </el-input> 使用@input对用户输入进行监控 inputMe(e){ return e.replace(/\/...

vue指令应用--实现输入框常见过滤功能

weixin_30316097的博客

06-12

988

前端开发最常碰到的就是输入框，经常要做各种验证，本公司惯用的需求是直接屏蔽特定字符的输入，如禁止非数字输入，特殊符号输入，空格输入等，这些功能反复使用，做成指令的形式，直接调用，非常方便，上代码：目录结构很简单：　　1、项目文件夹里新建directives文件夹，所有指令都放在这个文件夹里　　2、input-filter文件夹放具体指令，在其下建两个文件：　　　　a、in...

el-input响应式失效不展示数据！！！绑定v-model和input事件，不展示被重置初始值

最新发布

Jonathan的博客

05-27

373

vue el-input输入响应式输入数据无法回显问题

Vue——过滤input标签输入的内容

qq812457115的博客

04-26

1990

一、新建inputFilter.js , 过滤方法 exports.install = function (Vue, options) { //过滤0到9、a到F的字符 Vue.prototype.F_09aF = function () { fileterData(obj, key, new RegExp("[(0-9|a-f|A-F)]")); }; //过滤除数字和英文...

vue 防抖 input 输入框 filter 过滤数组数据

黑眼圈

04-13

912

直接上代码： <el-input placeholder="地区" v-model.trim="searchValue" @input="throttle()" suffix-icon="el-icon-search"> </el-input> // v-for="item in query(searchValue)" <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitie

2021-06-02 学习记录--表单绑定v-model + 过滤器写法

weixin_48850734的博客

06-29

255

v-model可用于 input / textarea

vue中el-input绑定键盘按键(按键修饰符)

10-15

当需要对el-input绑定键盘事件时，尤其是使用键盘修饰符来监听特定按键的触发，就涉及到了Vue的键盘事件绑定规则。Vue允许开发者将键盘按键作为修饰符来使用，比如监听回车键的事件，有两种写法： ```html <!-- ...

el-input 标签中密码的显示和隐藏功能的实例代码

10-16

在el-input标签中，可以通过v-model指令将输入框的值与Vue实例中的某个数据属性双向绑定。这样，无论用户输入什么，都会实时更新到对应的Vue实例数据属性中。在el-input标签内，我们加入一个自定义的图标插槽（slot...

Vue循环中多个input绑定指定v-model实例

10-14

当在`v-for`循环中生成多个`input`元素时，可以通过给每个`v-model`分配不同的值来实现不同`input`的独立绑定。例如，可以利用循环变量`index`或字符串拼接来创建唯一的`v-model`名。假设我们有一个数组`items`，每...

VUE.JS-收集表单数据、过滤器

XiaoSen207的博客

11-22

551

收集表单数据：若：，则v-model收集的是value值，用户输入的就是value值。若：，则v-model收集的是value值，且要给标签配置value值。若： 1.没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值） 2.配置input的value属性: (1)v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值） (2)v-model的初始值是数组，那么收集的的就是value组成的数组备注：v-model的三个修

winform list集合怎么 in过滤_布隆过滤器（Bloom Filter）详解

weixin_39822147的博客

11-06

268

作者：Zarten知乎专栏：Python爬虫深入详解知乎ID： Zarten简介：互联网一线工作者，尊重原创并欢迎评论留言指出不足之处，也希望多些关注和点赞是给作者最好的鼓励！介绍布隆过滤器（Bloom Filter）是1970年被布隆提出来的，用于判断某个元素是否在一个集合中，优点是空间效率和查询时间都非常高，缺点是有一定的误判率和删除困难。布隆过滤器原理布隆过滤器实际上是由一个超长的二进...

Vue知识点整理

dogeggcrazy的博客

03-01

628

VM：也就是View-Model，做了两件事达到了数据的双向绑定一是将【模型】转化成【视图】，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定。二是将【视图】转化成【模型】，即将所看到的页面转化成后端的数据。实现的方式是：DOM 事件监听。

自定义组件如何使用v-model

Chase 学习专栏

06-09

2419

自定义组件v-model使用

过滤器filter的使用

weixin_47581490的博客

11-08

1040

① 新建filter.js文件‘；② 在main.js文件里引入；③ 在vue文件的html部分，可直接使用。局部过滤就是在某个文件里进行定义后无需引入便可直接使用。定义的方法跟上面全局过滤时的filter.js里定义方法一样，使用也是一样的方法，只不过是把这些都放在了同一个vue文件里。

el-input校验过滤

huang_jimei的博客

03-06

473

oninput =“value=value.replace(/[^0-9.]/g,‘’)” //只能输入数字和小数。oninput =“value=value.replace(/[^\d]/g,‘’)” //只能输入数字。

el-input输入框过滤空白符

weixin_56521599的博客

03-26

532

【代码】el-input输入框过滤空白符。

解决el-input输入框使用oninput或onkeyup后，v-model双向绑定失效问题

weixin_42365757的博客

12-22

3653

解决el-input输入框使用oninput或onkeyup后，v-model双向绑定失效问题在输入中文触发oninput后，v-model绑定的值会被设成空字符串，这时候再输入数字，v-model绑定的值不会被赋值，一直为空。解决方法可以用blur手动给绑定的值赋值。 <el-input v-model="form.account" clearable placeholder="请输入编号" onkeyup="value=value.replace(/[^0-9]/g,'')" @b

el-input使用v-model绑定，值变了，但是v-model不生效

03-23

### el-input 组件中 v-model 双向绑定失效的原因分析在 Vue 和 Element UI 的开发过程中，`v-model` 是实现双向绑定的核心机制之一。然而，在某些情况下可能会遇到 `v-model` 更新值后视图未能同步的情况。这通常是由以下几个原因引起的： #### 1. 数据结构复杂度过高当 `v-model` 绑定的数据位于深层嵌套对象或数组内部时，Vue 的响应式系统可能无法检测到这些深层次的变化[^1]。这是因为 Vue 默认不会对深层嵌套的对象属性进行劫持和监听。解决方案可以是对数据进行浅拷贝或者强制触发视图更新。例如，可以通过重新赋值整个对象来通知 Vue 进行响应式处理： ```javascript this.someObject = { ...this.someObject, nestedProperty: newValue }; ``` #### 2. 使用了不可变数据结构如果绑定了一个不可变数据结构（如通过 `Object.freeze()` 或者其他方式冻结的对象），则 Vue 将无法对其进行修改，从而导致视图不更新。此时需要确保绑定的是可变数据结构[^2]。 #### 3. 自定义事件未正确处理 Element UI 中的输入框组件（如 `el-input`）默认会发出 `input` 事件以支持 `v-model` 的工作原理。但如果开发者手动覆盖了该事件而没有正确调用父级方法，则可能导致绑定失败。因此建议遵循官方文档推荐的方式——要么直接使用 `v-model` 要么显式地监听 `input` 并设置新的值。以下是两种常见修复方案的具体代码示例： ##### 方法一：直接使用 `v-model` 这是最简单也是最常见的做法，只需确保模型值能够被正常更改即可。 ```vue <template> <el-input v-model="value"></el-input> </template> <script> export default { data() { return { value: '' } }, } </script> ``` ##### 方法二：手动处理 input 事件对于更复杂的场景下，可以选择捕获原生 `input` 事件并自行管理状态变化过程。 ```vue <template> <el-input @input="handleInput" :value="value"></el-input> </template> <script> export default { data() { return { value: '' } }, methods:{ handleInput(newVal){ this.value = newVal; } } } </script> ``` 以上任一种方式都可以有效解决因各种因素造成的 `v-model` 失效问题。 ### 总结为了防止类似的错误再次发生，请注意保持合理的数据层次设计以及合理运用 Vue 提供的各种工具和技术手段去维护良好的应用性能表现。