這篇文章主要介紹了Vue2.0系列之過濾器的使用，現在分享給大家，也給大家做個參考。
vue2.0已經廢棄了過濾器，需要自訂過濾器，用於一些常見的文字格式化。
感覺超好用！ ！
過濾器可以用在兩個地方：雙花括號內插 和 v-bind表達式。
過濾器應該被加入在JavaScript表達式的尾部，由管道符指示。
一、註冊全域過濾器
注意事項：
1、全域方法Vue.filter()註冊一個自訂過濾器，必須放在vue實例化前面
2、過濾器函數總是以表達式的值作為第一個參數，帶引號的參數視為字串，而不帶引號的參數按表達式計算
3、可以設定兩個過濾器參數，前提這兩個過濾器處理的不衝突
4、用戶從input輸入的資料在會傳到model之前也可以先處理
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>过滤器</title>
</head>
<body>
<p id="app">
<!-- 首字符串大写 -->
<p>首字母大写过滤器：{{str | upcase}}</p>
<!-- 给过滤器传入参数 -->
<p>求和过滤器：{{message | sum(10,20)}}</p>
</p>
<script type="text/javascript" src='https://i0.jrjimg.cn/zqt-red-1000/focus/focus2017YMZ/teamFrighting/js/vue.min.js'></script>
<script type="text/javascript">
//全局方法 Vue.filter()注册一个自定义过滤器,必须放在Vue实例化前面
// 注册一个首字母大写的过滤器
Vue.filter("upcase", function(value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
});
// 全局注册一个求和过滤器
Vue.filter('sum', function (value, a, b) {
return value + a + b;
});
var demo = new Vue({
el: "#app",
data: {
str:'hello',
message:12
}
});
</script>
</body>
</html>登入後複製
案例效果：
#二、註冊在實例化內部
##過濾器也可以註冊在實例內部，僅在使用它的實例裡面註冊。
根據上述案例改編：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p id="app">
<!-- 首字符串大写 -->
<p>首字母大写过滤器：{{str | upcase}}</p>
<!-- 给过滤器传入参数 -->
<p>求和过滤器：{{message | sum(10,20)}}</p>
</p>
<script type="text/javascript" src='https://i0.jrjimg.cn/zqt-red-1000/focus/focus2017YMZ/teamFrighting/js/vue.min.js'></script>
<script type="text/javascript">
var demo = new Vue({
el: "#app",
data: {
str:'hello',
message:12
},
filters: {
upcase:function(value){
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
},
sum:function(value, a, b){
return value + a + b;
}
}
});
</script>
</body>
</html>登入後複製
效果：
三、常見篩選器
根據時間戳記轉換成時間格式：mm-dd hh:tt
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p id="app">
<!-- 将时间戳转化为时间 -->
<h1>根据时间戳转化为时间：{{ str | formateTime}}</h1>
</p>
<script type="text/javascript" src='https://i0.jrjimg.cn/zqt-red-1000/focus/focus2017YMZ/teamFrighting/js/vue.min.js'></script>
<script type="text/javascript">
var demo = new Vue({
el: "#app",
data: {
str:1517568434324,
},
filters: {
formateTime:function(nS){
return ((new Date(nS).getMonth()+1)<10?'0'+(new Date(nS).getMonth()+1):(new Date(nS).getMonth()+1)) + '-' + (new Date(nS).getDate()<10?'0'+new Date(nS).getDate():new Date(nS).getDate()) + ' ' + (new Date(nS).getHours()<10?'0'+new Date(nS).getHours():new Date(nS).getHours()) + ':' + (new Date(nS).getMinutes()<10?'0'+new Date(nS).getMinutes():new Date(nS).getMinutes())
}
}
});
</script>
</body>
</html>登入後複製
案例效果：
上面是我整理給大家的，希望未來會對大家有幫助。
相關文章：
關於在使用vue.js標籤屬性中插入變數參數的方法（詳細教學）
有關在Vue中點選元件外關閉元件方法（詳細教學）
詳細為你解決vue build打包之後首頁白螢幕的問題（詳細教學）
以上是在Vue2.0系列中如何使用過濾器？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
