VUE2.X過濾器的使用方法

avwu 發布于2019-08-21 18:47 / 673人閱讀

摘要：過濾器的使用方法有幾種，今天講一種，以社區為示例，轉換類型為中文漢字。文件如下下面在文件中引入并使用過濾器上面的很重要，如果沒有，過濾器將無法使用。將的值傳給過濾器自動轉換。

VUE2.X過濾器的使用方法有幾種，今天講一種，以cnode社區API為示例，轉換tab類型為中文漢字。
首先我們在assets文件夾中新建個js的文件夾，并新建common.js,然后將過濾器寫在這個文件中。當然你也可以寫在單個組件中，這個等下后面說。

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

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

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

上面的filters很重要，如果沒有，過濾器將無法使用。
最后就是在div中的使用了。非常簡單。如下：

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

GPU云服務器云服務器 php的過濾器 js過濾相同的數據過濾器數據過濾器

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/90804.html

vue2.x-cnode(vue全家桶)

摘要：后續會改成的版本安裝安裝編譯語法使用編譯語法圖片路徑與打包安裝引入圖片需要依賴的加載器樣式引入打包文件編譯打包引入樣式文件編譯 vue2.x-cnode 關于項目 vue2.x Cnode社區是基于vue、vue-router、vuex、axios、es6開發，使用webpack構建工具編譯打包項目如果此開源項目對大家學習vue的全家桶有幫助，請給我一個star,因為你的star讓我...

ThinkSNS 2019-08-20 14:26 評論0 收藏0
用Vue2.x重寫github-explorer

摘要：溫馨提示這個項目主要是用來學習的，所以我會不斷建分支重寫，下一個分支是。更加溫馨的提示已經將運用在了大型的項目中，反響一流，下一步是轉，希望喜歡的同學堅定信念啊。 github-explorer Rebuild with Vue 2.0 源碼地址1.x版本Live DemoReact版 Demo 簡介之前看到了一個很有意思的項目，是一位大牛寫的github-explorer。他用的是...

keithyau 2019-08-22 11:02 評論0 收藏0
Vue2.x 與Vue3.x 雙向數據綁定區別

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

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

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

617035918 2019-08-22 13:55 評論0 收藏0
Vue2.x踩坑與總結

摘要：年前就打算學習并總結一下，但是因為年前工作比較多，所以進展十分緩慢，現在終于學了一大部分，而且自己在學習開發中也踩了不少坑也總結了不少，所以將自己踩過的坑總結一下分享出來。因為在項目中使用了，所以對于也有一個踩坑總結，點擊鏈接。年前就打算學習并總結一下vue2.x，但是因為年前工作比較多，所以進展十分緩慢，現在終于學了一大部分，而且自己在學習開發中也踩了不少坑也總結了不少，所以將自己...

bovenson 2019-08-21 11:29 評論0 收藏0