v-model中如何使用过滤器
更新时间：2023年10月08日 14:29:54 作者：习惯是一种病
这篇文章主要介绍了v-model中如何使用过滤器问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
v-model中使用过滤器
v-model不能使用过滤器（filter）的替代或者解决方法；
如图：
页面中有v-model需要在输入时验证格式的时候(<input v-model='price' />)
官方给出的方法是使用computed，但是多个框时computed不能很好的复用；
使用input事件，通过传值验证输入框中的内容，
直接上代码：
<input v-model="price" @input="priceFormat('price',price)"/>
data(){
return {
price:'',//价钱
}
},
methods: {
/*价格过滤
*data：对应data中的名称，是字符串,val：对应data中的值
*/
priceFormat(data,val){
if(!/^\d*?\.?\d*?$/.test(val)){
this[data]='';//修改data中的价钱为空
}
}
}v-model或者v-text中使用过滤器进行脱敏不生效问题
vue.js允许我们自定义过滤器，可以用来处理一些常用的文本格式化，但是过滤器只能用在两个地方，双括弧插值（{{}}）和v-bind 表达式（后者聪vue2.1.0+才开始支持），并且filter应该被定义在js表达式的尾部，通常放在vue框架的methods下面；
但是有时候我们需要在v-model/v-text中使用脱敏，这里分别提供两种方法：
1.使用v-model进行过滤器脱敏
<template>
<div id="app">
<input type="text" v-model="userDate" />
<span>{{ userDate | dateFormat }}</span>
</div>
</template>其中，v-model用来进行双向绑定，下面的双括弧用来进行脱敏显示；
2.手动将关键部位进行截取加*脱敏
<div class="cuzu" v-show="cuzu"> <div class="formName formSlect"> <h1>出租人姓名</h1> <input type="text" id="lessorName" v-model="Tname" disabled="disabled"> <div class="clearFix"></div> </div> <div class="formName formSlect"> <h1>出租人证件号</h1> <input type="text" id="lessorCode" v-model="Tidcard" disabled="disabled"> <div class="clearFix"></div> </div> </div>
//这里用来传递实参运算
_this.name = res.userdetail.name;
_this.idcard = res.userdetail.papersnumber;
//身份证脱敏处理
info.Tidcard = res.userdetail.papersnumber.substring(0, 1) + "****************" + res.userdetail.papersnumber.substring(17, 18);
//姓名脱敏处理
info.Tname = "*" + res.userdetail.name.slice(1);这里v-model拿到后台截取加*后的参数进行脱敏展示。
获取到用户信息后对名字（2/3/4个字）进行脱敏
_this.name = res.userdetail.name;
if (_this.name.length == 2) {
_this.yhmc = _this.name.slice(0, 1) + "*";
} else if (_this.name.length == 3) {
_this.yhmc = _this.name.slice(0, 1) + "**";
}
else {
_this.yhmc = _this.name.slice(0, 1) + "***";
}3.定义一个方法进行脱敏处理
changeCardid: function (value) {
if (!value) return ''
//return value.replace(/(\w{3})\w*(\w{4})/, '$1******$2')
return value.replace(/(\w{1})\w*(\w{1})/, '$1****************$2')
},
changeName: function (value) {
if (!value) return ''
else {
if (value.length == 3) {
return value.substr(0, 1) + "**"
} else if (value.length == 2) {
return value.substr(0, 1) + "*"
} else {
return value.substr(0, 1) + "***"
}
}
}然后在v-model中直接调用我们声明的脱敏方法，changeName(name)
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue-cli中的图片资源存放位置，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要介绍了vue 国际化 vue-i18n 双语言 语言包的相关知识，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2018-06-06
本文主要介绍了vue中使用 pinia 全局状态管理的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-07-07
resetFields 对整个表单进行重置,将所有字段值重置为空并移除校验结果,下面这篇文章主要给大家介绍了关于vue中resetFields重置初始值不生效的原因的相关资料,需要的朋友可以参考下2023-03-03
这篇文章主要介绍了vue如何使用rem适配，帮助大家处理vue开发移动应用时的兼容性问题，感兴趣的朋友可以了解下2021-02-02
今天小编就为大家分享一篇解决vue axios的封装 请求状态的错误提示问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要为大家介绍了Vue前端路由hash与history差异的深入了解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-06-06
在许多的后台系统中少不了导出Excel表格的功能,下面这篇文章主要给大家介绍了关于Vue3.0导出数据为自定义样式Excel的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-06-06
下面小编就为大家分享一篇基于vue1和vue2获取dom元素的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
Vue项目报错：Uncaught SyntaxError: Unexpected token <
这篇文章主要介绍了Vue项目报错：Uncaught SyntaxError: Unexpected token <，在引入第三方依赖的 JS 文件时，遇到的一个问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
最新评论