vue踩坑之在input中使用filters局部过滤器问题
更新时间：2023年11月17日 09:19:13 作者：TongYuTian
这篇文章主要介绍了vue踩坑之在input中使用filters局部过滤器问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
在input中使用filters局部过滤器
最近在项目中遇到需要对Input框中v-model绑定的枚举值进行过滤展示到页面上，万事具备，刷新页面后发现filters并没有起作用
控制台还报错：
[Vue warn]: Property or method "filterTime" is not defined on the instance but referenced during render.
Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.
于是乎，我就重新研究了一下vue.js的过滤器filters，发现filters只能用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。
中文官网链接：https://cn.vuejs.org/v2/guide/filters.html
解决方案
使用计算属性
一个小demo：
<template>
<input v-model="filterCardType" placeholder="证件类型" />
</template>
<script>
export default {
data() {
return {
agent_detail: {
agent_detail:1,
},
};
},
computed:{
"filterCardType"(){
if(this.agent_detail.cardType==0){
return "二代身份证"
}else if(this.agent_detail.cardType==1){
return "护照"
}else if(this.agent_detail.cardType==2){
return "港澳通行证"
}else if(this.agent_detail.cardType==3){
return "台湾通行证"
}else if(this.agent_detail.cardType==4){
return "香港永久性居民身份证"
}else if(this.agent_detail.cardType==5){
return "军官证"
}
}
}
}
</script>
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
Vue3增加了很多让人眼前一亮的特征,suspense 组件就是其中之一,对处理异步请求数据非常实用,下面这篇文章主要给大家介绍了关于Vue3中如何使用异步请求的相关资料,需要的朋友可以参考下2022-06-06
本文主要介绍了Jenkins自动化部署Vue项目的方法实现，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
今天小编就为大家分享一篇vuex提交state&&实时监听state数据的改变方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
在Vue应用中,跨标签页的通信通常涉及到两个或多个浏览器标签页之间的信息共享,由于每个标签页或窗口都是独立的JavaScript执行环境,它们不能直接通过Vue或其他JavaScript库来直接相互通信,但是,有一些方法可以实现这种跨标签页的通信,以下是一些常用的跨标签页通信方法2025-03-03
vue-loader和webpack项目配置及npm错误问题的解决
这篇文章主要介绍了vue-loader和webpack项目配置及npm错误问题的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
这篇文章主要为大家详细介绍了vue简易记事本的开发过程，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-06-06
本文将探讨Vue中异步请求数据未更新的常见原因,并提供解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2025-03-03
这篇文章主要介绍了Vue 列表过滤与排序的实现，文章围绕主题展开详细的内容介绍，具有一定的参考价值需要的小伙伴可以参考一下2022-05-05
这篇文章主要介绍了阿望教你用vue写扫雷小游戏，本文通过实例代码效果图展示的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2020-01-01
Vue是一套用于构建前后端分离的框架。刚开始是由国内优秀选手尤雨溪开发出来的，目前是全球“最”流行的前端框架。使用vue开发网页很简单，并且技术生态环境完善，社区活跃，是前后端找工作必备技能！下面来看看其得安装及使用方法吧2021-10-10
最新评论