首頁 > web前端 > js教程 > 在vue中如何使用filter過濾器

在vue中如何使用filter過濾器

亚连
發布: 2018-06-12 14:31:26
原創
3727 人瀏覽過

vue的過濾器通常用在一些常見的文字格式化,過濾器可以用在兩個地方:雙花括號插值和 v-bind 表達式。本文為大家介紹了web前端vue filter 過濾器的相關知識,有興趣的朋友一起看看吧

vue的過濾器通常用在一些常見的文本格式化,過濾器可以用在兩個地方:雙花括號內插和v-bind 表達式。

例如給價格自動加上中文的錢的字元「¥」或是給一個時間段或(時間戳)相互之間的轉換過濾。

在javascript和jquery的年代!時段的顯示或是提交,都是要在顯示的時候要轉換下或是提交的時候轉換下,這樣就有點繁瑣了(個人用了vue後的感覺繁瑣了)。

不多說直接看例子如下:

filter定義的過濾器可以局部,可以全局的下面就直接說全局的

老樣子還是等先註冊一個全域的過濾器關鍵字(filter)

全域的註冊過濾器是在main.js這個檔案裡,當然也可以單獨的一個js檔案裡

Vue.filter('dateconversion', function (value) { // 一个时间戳转正常的过滤器
 let date = new Date(value) // nuw 一个时间
 let getHours // 小时
 let getMinutes // 分
 if(date.getHours() < 10){getHours = "0"+date.getHours()}else{ getHours = date.getHours()}
// 判断小时是否小于10的补全:加0
 if(date.getMinutes() < 10){getMinutes = "0"+date.getMinutes()}else{ getMinutes = date.getMinutes()}
// 判断分是否小于10的补全:加0
 return date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate()+" "+ getHours +":"+ getMinutes // 返回转换后的值
})
登入後複製

使用起來很方便的,可以在各個組件裡凡事有要轉換顯示時間的都可以用

<template>
{{date | dateconversion}} // 使用方式,就是怎么简单,整个项目随便用
</template> 
<script>
export default {
 data () {
  return {
   date: &#39;&#39; // 后台传来的时间戳
  }
 }
}
</script>
登入後複製

上面是我整理給大家的,希望今後會對大家有幫助。

相關文章:

詳細介紹js中有關promise的知識點

在jQuery如何解決niceScroll滾動條錯位問題

在JS中如何實作百度搜尋介面

以上是在vue中如何使用filter過濾器的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板