vue踩坑之在input中使用filters局部過濾器問題
更新時間：2023年11月17日 09:19:13 作者：TongYuTian
這篇文章主要介紹了vue踩坑之在input中使用filters局部過濾器問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
在input中使用filters局部過濾器
? 最近在項目中遇到需要對Input框中v-model綁定的枚舉值進行過濾展示到頁面上，萬事具備，刷新頁面后發(fā)現(xiàn)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，發(fā)現(xiàn)filters只能用在兩個地方：雙花括號插值和 v-bind 表達(dá)式 (后者從 2.1.0+ 開始支持)。
中文官網(wǎng)鏈接：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>
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue3增加了很多讓人眼前一亮的特征,suspense 組件就是其中之一,對處理異步請求數(shù)據(jù)非常實用,下面這篇文章主要給大家介紹了關(guān)于Vue3中如何使用異步請求的相關(guān)資料,需要的朋友可以參考下2022-06-06
本文主要介紹了Jenkins自動化部署Vue項目的方法實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
vuex提交state&&實時監(jiān)聽state數(shù)據(jù)的改變方法
今天小編就為大家分享一篇vuex提交state&&實時監(jiān)聽state數(shù)據(jù)的改變方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
在Vue應(yīng)用中,跨標(biāo)簽頁的通信通常涉及到兩個或多個瀏覽器標(biāo)簽頁之間的信息共享,由于每個標(biāo)簽頁或窗口都是獨立的JavaScript執(zhí)行環(huán)境,它們不能直接通過Vue或其他JavaScript庫來直接相互通信,但是,有一些方法可以實現(xiàn)這種跨標(biāo)簽頁的通信,以下是一些常用的跨標(biāo)簽頁通信方法2025-03-03
vue-loader和webpack項目配置及npm錯誤問題的解決
這篇文章主要介紹了vue-loader和webpack項目配置及npm錯誤問題的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
這篇文章主要為大家詳細(xì)介紹了vue簡易記事本的開發(fā)過程，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06
Vue中關(guān)于異步請求數(shù)據(jù)未更新的解決
本文將探討Vue中異步請求數(shù)據(jù)未更新的常見原因,并提供解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-03-03
這篇文章主要介紹了Vue?列表過濾與排序的實現(xiàn)，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價值需要的小伙伴可以參考一下2022-05-05
這篇文章主要介紹了阿望教你用vue寫掃雷小游戲，本文通過實例代碼效果圖展示的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2020-01-01
Vue是一套用于構(gòu)建前后端分離的框架。剛開始是由國內(nèi)優(yōu)秀選手尤雨溪開發(fā)出來的，目前是全球“最”流行的前端框架。使用vue開發(fā)網(wǎng)頁很簡單，并且技術(shù)生態(tài)環(huán)境完善，社區(qū)活躍，是前后端找工作必備技能！下面來看看其得安裝及使用方法吧2021-10-10