vue2 0中過濾器的使用

2021-08-01 12:00:31 字數 652 閱讀 3193

vue.js在2.0版本中,相對於1.0版本做了比較大的改動,2.0版本中,過濾器只用於插入文字中(})。1.0版本中指令(如:v-for,v-on等)裡邊的過濾器現在都放在計算屬性中。同時1.0版本中的所有內建過濾器(如:capitalize等)全部取消了。下邊通過乙個實際的例子說明2.0版本中過濾器的用法。**如下:

}

}

以上**動態渲染了乙個列表,同時設計了搜尋框,實現了動態過濾效果,整體效果如下:

從以上**可以看到過濾器的具體用法:

1、capitalize是實現首字母大寫的過濾器,在1.0版本中是內建的,這裡要自己實現,放在vue物件的filters屬性中,其中引數value儲存著文字}中待過濾的變數。

2、在我們實現動態過濾data中的資料項的時候,1.0版本是在v-for指令後邊加上過濾器,2.0版本裡邊放在計算屬性(computed)中,同時v-for指令中原來的data變成計算屬性filtereddata。

更多有關過濾器的細節,請移步vue官網。

Vue2 0自定義過濾器

先了解一下什麼是vue過濾器 vue在1.0中有許許多多的各種功能的過濾器 先建立乙個例項裡面寫上一些資料稍後使用 var vm new vue methods dom 結構中 幾個1.0中自帶的過濾器例子 limitby 迴圈陣列的時候顯示幾條資料,從那條 索引 開始顯示 filterby在所有的...

Vue2 0裡過濾器容易踩到的坑

vue2.0裡,不再有自帶的過濾器,需要自己定義過濾器。定義的方法如下 註冊乙個自定義過濾器,它接收兩個引數 過濾器 id 和過濾器函式。vue.filter filtername function value,引數 function裡第乙個引數value預設為使用這個過濾器的data物件內的值,在...

vue元件中過濾器 Vue中如何使用過濾器

前言 vue中的過濾器可以格式化以及美化內容 從後台接受資料過來的時候時間是時間毫秒,我選擇了使用過濾器,接下來給大家分享一下使用過程 在全域性配置過濾器 main.js檔案裡面 時間過濾器 vue.filter datefilter function val datefileter是過濾器名 es...