VUE2.X過(guò)濾器的使用方法

avwu 發(fā)布于2019-08-21 18:47 / 680人閱讀

摘要：過(guò)濾器的使用方法有幾種，今天講一種，以社區(qū)為示例，轉(zhuǎn)換類(lèi)型為中文漢字。文件如下下面在文件中引入并使用過(guò)濾器上面的很重要，如果沒(méi)有，過(guò)濾器將無(wú)法使用。將的值傳給過(guò)濾器自動(dòng)轉(zhuǎn)換。

VUE2.X過(guò)濾器的使用方法有幾種，今天講一種，以cnode社區(qū)API為示例，轉(zhuǎn)換tab類(lèi)型為中文漢字。
首先我們?cè)赼ssets文件夾中新建個(gè)js的文件夾，并新建common.js,然后將過(guò)濾器寫(xiě)在這個(gè)文件中。當(dāng)然你也可以寫(xiě)在單個(gè)組件中，這個(gè)等下后面說(shuō)。

/**
* 將tab類(lèi)型轉(zhuǎn)換成漢字
* @param {String} tab 待轉(zhuǎn)換前的tab值
* @return {String}    轉(zhuǎn)換后的tab中文
*/
export function change (tab) {
  switch (tab) {
    case "share":
      return "分享"
    case "ask":
      return "問(wèn)答"
    case "job":
      return "招牌"
    case "good":
      return "精華"
  }
}

上面是common.js文件中過(guò)濾器。文件如下：

下面在vue文件中引入并使用過(guò)濾器：

上面的filters很重要，如果沒(méi)有，過(guò)濾器將無(wú)法使用。
最后就是在div中的使用了。非常簡(jiǎn)單。如下：

上面的change就是過(guò)濾器。item.tab將tab的值傳給change過(guò)濾器自動(dòng)轉(zhuǎn)換。你可以在common.js中寫(xiě)更多的過(guò)濾器或其他方法。使用方法都是一樣的。
你也可以直接將過(guò)濾器寫(xiě)在vue文件中。就寫(xiě)在filters里面：

GPU云服務(wù)器云服務(wù)器 php的過(guò)濾器 js過(guò)濾相同的數(shù)據(jù) 過(guò)濾器數(shù)據(jù)過(guò)濾器

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/90804.html

相關(guān)文章

vue2.x-cnode(vue全家桶)

摘要：后續(xù)會(huì)改成的版本安裝安裝編譯語(yǔ)法使用編譯語(yǔ)法圖片路徑與打包安裝引入圖片需要依賴的加載器樣式引入打包文件編譯打包引入樣式文件編譯 vue2.x-cnode 關(guān)于項(xiàng)目 vue2.x Cnode社區(qū)是基于vue、vue-router、vuex、axios、es6開(kāi)發(fā)，使用webpack構(gòu)建工具編譯打包項(xiàng)目如果此開(kāi)源項(xiàng)目對(duì)大家學(xué)習(xí)vue的全家桶有幫助，請(qǐng)給我一個(gè)star,因?yàn)槟愕膕tar讓我...

ThinkSNS 2019-08-20 14:26 評(píng)論0 收藏0
用Vue2.x重寫(xiě)github-explorer

摘要：溫馨提示這個(gè)項(xiàng)目主要是用來(lái)學(xué)習(xí)的，所以我會(huì)不斷建分支重寫(xiě)，下一個(gè)分支是。更加溫馨的提示已經(jīng)將運(yùn)用在了大型的項(xiàng)目中，反響一流，下一步是轉(zhuǎn)，希望喜歡的同學(xué)堅(jiān)定信念啊。 github-explorer Rebuild with Vue 2.0 源碼地址1.x版本Live DemoReact版 Demo 簡(jiǎn)介之前看到了一個(gè)很有意思的項(xiàng)目，是一位大牛寫(xiě)的github-explorer。他用的是...

keithyau 2019-08-22 11:02 評(píng)論0 收藏0
Vue2.x 與Vue3.x 雙向數(shù)據(jù)綁定區(qū)別

摘要：看過(guò)的源碼都知道，其雙向數(shù)據(jù)綁定原理是通過(guò)的，中的方法來(lái)實(shí)現(xiàn)數(shù)據(jù)劫持的，但是有一個(gè)弊端就是無(wú)法兼聽(tīng)到數(shù)組內(nèi)部的數(shù)據(jù)變化當(dāng)然我們可以通過(guò)，來(lái)實(shí)現(xiàn)內(nèi)部數(shù)據(jù)變化的檢測(cè)。相比有一定的性能問(wèn)題。 showImg(https://segmentfault.com/img/bVbsjcO?w=640&h=372);看過(guò)Vue2.x的源碼都知道，其雙向數(shù)據(jù)綁定原理是通過(guò)es5的Object.defin...

phpmatt 2019-08-23 17:19 評(píng)論0 收藏0
[vue插件]基于vue2.x的電商圖片放大鏡插件

摘要：基于的電商圖片放大鏡插件動(dòng)畫(huà)截圖使用步驟安裝使用配置圖片地址大圖地址圖片放大倍數(shù)放大時(shí)頁(yè)面是否可滾動(dòng)注意事項(xiàng)組件默認(rèn)是的高寬，所以建議將組件包含在一個(gè)有固定高寬的容器內(nèi)。最近在擼一個(gè)電商網(wǎng)站，有一個(gè)需求是要像淘寶商品詳情頁(yè)那樣，鼠標(biāo)放在主圖上，顯示圖片放大鏡效果，找了一下貌似沒(méi)有什么合適的vue插件，于是自己擼了一個(gè)，分享一下。小白第一次分享，各位大神莫見(jiàn)笑。 vue-piczoom...

617035918 2019-08-22 13:55 評(píng)論0 收藏0
Vue2.x踩坑與總結(jié)

摘要：年前就打算學(xué)習(xí)并總結(jié)一下，但是因?yàn)槟昵肮ぷ鞅容^多，所以進(jìn)展十分緩慢，現(xiàn)在終于學(xué)了一大部分，而且自己在學(xué)習(xí)開(kāi)發(fā)中也踩了不少坑也總結(jié)了不少，所以將自己踩過(guò)的坑總結(jié)一下分享出來(lái)。因?yàn)樵陧?xiàng)目中使用了，所以對(duì)于也有一個(gè)踩坑總結(jié)，點(diǎn)擊鏈接。年前就打算學(xué)習(xí)并總結(jié)一下vue2.x，但是因?yàn)槟昵肮ぷ鞅容^多，所以進(jìn)展十分緩慢，現(xiàn)在終于學(xué)了一大部分，而且自己在學(xué)習(xí)開(kāi)發(fā)中也踩了不少坑也總結(jié)了不少，所以將自己...

bovenson 2019-08-21 11:29 評(píng)論0 收藏0