av一区二区在线观看_亚洲男人的天堂网站_日韩亚洲视频_在线成人免费_欧美日韩精品免费观看视频_久草视

您的位置:首頁技術文章
文章詳情頁

vue3刪除過濾器的原因

瀏覽:31日期:2022-09-29 16:50:49
目錄什么是vue的過濾器why?舉例分析需求描述HTML結構和data數據如下使用filter實現使用computed實現使用methods實現總結什么是vue的過濾器

過濾器可以通俗理解成是一個特殊的方法,用來加工數據的

比如枚舉值可以使用過濾器:如 1 2 3 4 對應 成功 失敗 進行中 已退回 比如價格后面跟個過濾器,將價格格式化成小數點兩位 比如時間格式化等

詳細請看官方文檔

why?

筆者認為:原因就是vue3要精簡代碼,并且filter功能重復,filter能實現的功能,methods和計算屬性基本上也可以實現。所以就干脆把filter這方面的vue源碼給刪掉,這樣的話,更加方便維護。

舉例分析需求描述

假設我們有一個快遞信息,后端返回給我們的并不是具體的狀態值,而是對應的字符串1 2 3 4 5 6等,不同的狀態有著一套對應

規則,比如狀態為1是待發貨等,具體效果圖和狀態對應關系如下圖:

vue3刪除過濾器的原因

HTML結構和data數據如下

<template> <div id='app'> <ul v-for='(item, index) in arr' :key='index'> <li>快遞公司:{{ item.deliverCompany }}</li> <li>運輸狀態:{{ item.expressState }}</li> </ul> </div></template><script>export default { data() { return { arr: [{ deliverCompany: '京東快遞', expressState: '1',},{ deliverCompany: '順豐快遞', expressState: '2',},{ deliverCompany: '中通快遞', expressState: '3',},{ deliverCompany: '郵政快遞', expressState: '4',},{ deliverCompany: '極兔快遞', expressState: '5',},{ deliverCompany: '某某快遞', expressState: null,}, ], }; },};</script>使用filter實現

這里我們就不用全局filter了,使用組件內部的filter

<template> <div id='app'> <ul v-for='(item, index) in arr' :key='index'> <li>快遞公司:{{ item.deliverCompany }}</li> <!-- 使用過濾器語法 --> <li>運輸狀態:{{ item.expressState | showState }}</li> </ul> </div></template><script>export default { // data ...... 篇幅有限直接省略掉 // 在組件內定義,然后根據不同的狀態返回不同的值內容 filters: { showState(state) { switch (state) {case '1': return '待發貨'; break;case '2': return '已發貨'; break;case '3': return '運輸中'; break;case '4': return '派件中'; break;case '5': return '已收貨'; break;default: return '快遞信息丟失'; break; } }, },};</script>使用computed實現

<template> <div id='app'> <ul v-for='(item, index) in arr' :key='index'> <li>快遞公司:{{ item.deliverCompany }}</li> <!-- 使用計算屬性 --> <li>運輸狀態:{{ computedText(item.expressState) }}</li> </ul> </div></template><script>export default { // data ...... 篇幅有限直接省略掉 computed: { computedText() { // 計算屬性要return一個函數接收參數 return function (state) {switch (state) { case '1': return '待發貨'; break; case '2': return '已發貨'; break; case '3': return '運輸中'; break; case '4': return '派件中'; break; case '5': return '已收貨'; break; default: return '快遞信息丟失'; break;} }; }, },};</script>使用methods實現

<template> <div id='app'> <ul v-for='(item, index) in arr' :key='index'> <li>快遞公司:{{ item.deliverCompany }}</li> <!-- 使用方法 --> <li>運輸狀態:{{ methodsText(item.expressState) }}</li> </ul> </div></template><script>export default { // data ...... 篇幅有限直接省略掉 methods: { methodsText(state) { switch (state) {case '1': return '待發貨'; break;case '2': return '已發貨'; break;case '3': return '運輸中'; break;case '4': return '派件中'; break;case '5': return '已收貨'; break;default: return '快遞信息丟失'; break; } }, },};</script>

看到了叭,filter過濾器能加工數據,computed計算屬性和methods方法也都可以加工數據,這樣的話,就重復了...

總結

vue3刪除了filter就好比:

員工filter會干的活,員工computed和員工methods也會干,而且比員工filter干得多,干的好。這樣的話,老板vue就把filter開除了,filter就被fired了。畢竟多一個員工,多一些用工成本(員工filter哇的一聲哭了出來)

以上就是vue3刪除過濾器的原因的詳細內容,更多關于vue3刪除過濾器的資料請關注好吧啦網其它相關文章!

標簽: Vue
相關文章:
主站蜘蛛池模板: 国产精品久久久久久久久久久久久 | 国产在线97| 国产第一亚洲 | 成人在线观看免费视频 | 二区av| 欧美日日 | 一级少妇女片 | 亚洲欧洲成人在线 | 激情一区二区三区 | 久久精品欧美一区二区三区不卡 | 久久蜜桃精品 | www.国产精 | 日本电影一区二区 | 成人在线视频网站 | 日韩一区二区久久 | 91网在线观看 | 亚洲欧美在线一区 | 亚洲精品一区二三区不卡 | 91精品麻豆日日躁夜夜躁 | 国产精品免费在线 | 91麻豆精品国产91久久久更新资源速度超快 | 国产一二三区精品视频 | 国产精品一区二区在线观看 | 爱操影视 | 可以在线观看av的网站 | 337p日本欧洲亚洲大胆精蜜臀 | 日韩在线国产精品 | 久久久91精品国产一区二区精品 | 久久久久亚洲精品中文字幕 | 国产激情视频在线免费观看 | 国产最好的av国产大片 | 欧美亚洲另类丝袜综合网动图 | 亚洲国产精久久久久久久 | 欧美精品第一页 | 国产免费观看一级国产 | 国产99热精品 | 日韩欧美在线播放 | 亚洲精品一区二区另类图片 | 欧美中文字幕一区二区三区亚洲 | 日韩在线视频一区二区三区 | 欧美一区二区三区在线观看视频 |