vue filter的四種用法小結(jié)
更新時(shí)間：2022年04月11日 15:04:54 作者：大灰狼的小綿羊哥哥
這篇文章主要介紹了vue filter的四種用法小結(jié)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
filter的用法小結(jié)
使用計(jì)算屬性app.js
var app5 = new Vue({
? ? el: '#app5',
? ? data: {
? ? ? ? shoppingList: [
? ? ? ? ? ? "Milk", "Donuts", "Cookies", "Chocolate", "Peanut Butter", "Pepto Bismol", "Pepto Bismol (Chocolate flavor)", "Pepto Bismol (Cookie flavor)"
? ? ? ? ],
? ? ? ? key: ""
? ? },
? ? computed: {
? ? ? ? filterShoppingList: function () {
? ? ? ? ? ? // `this` points to the vm instance
? ? ? ? ? ? var key = this.key;
? ? ? ? ? ? var shoppingList = this.shoppingList;
? ? ? ? ? ? return shoppingList.filter(function (item) {
? ? ? ? ? ? ? ? return item.toLowerCase().indexOf(key.toLowerCase()) != -1
? ? ? ? ? ? });;
? ? ? ? }
? ? }
})app.html
<div id="app5">
? ? ? ? <h2>Vue-for</h2>
? ? ? ? <ul>
? ? ? ? ? ? <li v-for="item in shoppingList">
? ? ? ? ? ? ? ? {{ item }}
? ? ? ? ? ? </li>
? ? ? ? </ul>
? ? ? ? <h2>Vue-for filter實(shí)現(xiàn)</h2>
? ? ? ? <ul>
? ? ? ? ? ? Filter Key<input type="text" v-model="key"> ??
? ? ? ? ? ? <li v-for="item in filterShoppingList">
? ? ? ? ? ? ? ? {{ item }}
? ? ? ? ? ? </li>
? ? ? ? </ul> ? ? ? ?
? ? </div> ? ?最終效果實(shí)現(xiàn)了根據(jù)關(guān)鍵字來過濾列表的功能。
filter的基本用法
filter是和data computed methods watch一樣，都是new Vue（）的參數(shù)。
用于對(duì)簡(jiǎn)單數(shù)據(jù)的處理，和computed有沖突，所以從vue2.0后就對(duì)filter做了刪減，我覺得沒有filter完全能夠用其他方法比如computed來實(shí)現(xiàn)
用在{{ 變量1 | 變量2 }} 或者 v-bind：xx=“ 變量1 | 變量2（[參數(shù)） ” 兩種；其中變量1是data的k，變量2是filter的k，
filter：{ 變量2：function（變量1，參數(shù)）{xxxx}}
<div id="app">
? ? ? ? <div> {{val | upcaseVal(true)}}</div>
? ? ? ? <div v-bind:title="val | upcaseVal">{{val}}</div>
? ? ? ? <div>{{val | removeSpace}}</div>
? ? </div>? ? <script>
? ? ? ? var vm = new Vue({
? ? ? ? ? ? el: '#app',
? ? ? ? ? ? data: {
? ? ? ? ? ? ? ? val: 'hello world'
? ? ? ? ? ? },
? ? ? ? ? ? filters: {
? ? ? ? ? ? ? ? upcaseVal: function (val, firstUpper) {//filter里函數(shù)的參數(shù)需要特別注意 第一個(gè)是指|前的值，第二個(gè)是true
? ? ? ? ? ? ? ? ? ? if (firstUpper) {
? ? ? ? ? ? ? ? ? ? ? ? return val.split(' ').map(function (e) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? return e[0].toUpperCase() + e.slice(1)
? ? ? ? ? ? ? ? ? ? ? ? }).join(' ')
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? return val.toUpperCase();
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? removeSpace:function(val){
? ? ? ? ? ? ? ? ? ? return val.toUpperCase()
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? })以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue.js devtool插件最近在開發(fā)人員中很火，這篇文章主要為大家詳細(xì)介紹了Vue.js devtool插件安裝后無法使用，出現(xiàn)提示“vue.js not detected”的解決辦法2017-11-11
這篇文章主要介紹了在vue2.0中引用element-ui組件庫,需要的朋友可以參考下2018-06-06
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)按鈕切換圖片，正向反向以及順序切換，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-01-01
vue+elementUI實(shí)現(xiàn)當(dāng)渲染文本超出一定字?jǐn)?shù)時(shí)顯示省略號(hào)
這篇文章主要介紹了vue+elementUI實(shí)現(xiàn)當(dāng)渲染文本超出一定字?jǐn)?shù)時(shí)顯示省略號(hào),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
element-ui自定義表格如何給input雙向綁定數(shù)據(jù)
這篇文章主要介紹了element-ui自定義表格如何給input雙向綁定數(shù)據(jù)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
vue2移動(dòng)端+swiper實(shí)現(xiàn)異形的slide方式
這篇文章主要介紹了vue2移動(dòng)端+swiper實(shí)現(xiàn)異形的slide方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
在前端開發(fā)中,使用axios進(jìn)行數(shù)據(jù)請(qǐng)求是常見的做法,封裝axios可以統(tǒng)一請(qǐng)求頭處理、方便接口管理、配置多攔截器等,提高代碼的可維護(hù)性和重用性,本文詳細(xì)記錄了axios的封裝過程,包括安裝、配置跨域處理、接口管理文件的創(chuàng)建等2024-09-09
Vue使用v-for數(shù)據(jù)渲染順序混亂的原因及解決方案
在 Vue.js 中,使用 v-for 指令進(jìn)行數(shù)據(jù)渲染時(shí),有時(shí)會(huì)遇到渲染順序混亂的問題,這種問題主要與 Vue 的響應(yīng)式系統(tǒng)、DOM 更新機(jī)制以及數(shù)組的變更方法有關(guān),以下是對(duì)這一現(xiàn)象的深入分析及解決方案,需要的朋友可以參考下2025-01-01
vuex中的state、getters、mutations、actions之間的關(guān)系解讀
這篇文章主要介紹了vuex中的state、getters、mutations、actions之間的關(guān)系,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
Electron實(shí)現(xiàn)靜默打印小票的流程詳解
很多情況下程序中使用的打印都是用戶無感知的,并且想要靈活的控制打印內(nèi)容,往往需要借助打印機(jī)給我們提供的api再進(jìn)行開發(fā),這種開發(fā)方式非常繁瑣,并且開發(fā)難度較大,本文給大家介紹了Electron實(shí)現(xiàn)靜默打印小票的流程,感興趣的朋友可以參考下2024-06-06