vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue在input中使用filters局部过滤器

vue踩坑之在input中使用filters局部过滤器问题

作者: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>

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文