Vue的過濾器你真瞭解嗎
1. 過濾器
案例中使用到時間格式相關API
1.1 對過濾器的理解
定義:對要顯示的數據進行特定格式化後在顯示
適用:做一些簡單的邏輯處理
特點:濾器可以做一些簡單操作,並且沒有改變原來的數據,產生新的對應的數據
1. 語法 : data | 過濾器
不傳參數默認將data值傳入,並且自動調用函數,函數可接收到value
傳參數並不會覆蓋掉第一個參數,第一個參數默認是value,第二個參數才是 傳入的參數
2. 濾器可以以串聯的形式
data | 過濾器 | 過濾器
執行的順序是將data當做參數傳入到第一個過濾器中,第一個過濾器處理完,返回的
值作為第二個過濾器的參數
1.2 全局過濾器:
Vue.filter(filterName, function(value){ return value.slice(0, 4); }) new Vue({ . .. ... })
1.3 局部過濾器:
new Vue{ filters:{ filterName(value){ return value.slice(0, 4); } } }
在html中使用過濾器
<div>{{ handledata | filtername }}</div> <div>{{ handledata | filtername(參數) }}</div>
1.4 過濾器的案例
<div id="root"> <h3>methods寫的:{{time()}}</h3> <h3>computed寫的:{{time1}}</h3> <h3>過濾器的寫的:{{number | ftime("YYYY-MM-DD HH:mm:ss") | qjtime}}</h3> </div> <div id="root2"> <hr> <h3>{{name | qjtime}}</h3> </div> <script> Vue.config.productionTip = false // 全局過濾器 Vue.filter('qjtime', function (val) { return val.slice(0, 4) }) let vm = new Vue({ el: '#root', data: { number: Date.now() }, methods: { time() { return dayjs(this.number).format("YYYY年MM月DD日 HH:mm:ss") } }, computed: { time1: { get() { return dayjs(this.number).format("YYYY年MM月DD日 HH:mm:ss") } } }, // 局部過濾器 filters: { // 這是ES的語法表示如果有傳參數就使用傳進來的參數,如果沒有傳參就使用 ftime(val, str = "YYYY年MM月DD日 HH:mm:ss") { return dayjs(val).format(str) }, } }) new Vue({ el: "#root2", data: { number: Date.now(), name: '我是第二個Vue' } }) </script>
總結
以上就是今天要講的內容,本文介紹瞭對過濾器的一些相關知識,希望對大傢有所幫助!
推薦閱讀:
- Vue之過濾器詳解
- Vue過濾器與內置指令和自定義指令及組件使用詳解
- vue如何動態實時的顯示時間淺析
- 解決vue過濾器filters獲取不到this對象的問題
- Vue如何使用Dayjs計算常用日期詳解