Vue過濾器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="lib/vue.min.js"></script>
<style type="text/css">
</style>
</head>
<body>
<div id="app">
<h1>{{msg |msgFormat}}</h1>
</div>
</body>
<script>
Vue.filter('msgFormat',function(msg){
return msg.replace(/學習/g,'討論');
})
var vm = new Vue({
el:'#app',
data:{
msg:"我是一個愛學習的人，學習各種技術(shù)"
}
})
</script>
</html>
使用Vue.filter()來對指定的元素進行過濾，function中傳遞的參數(shù)即是el表達式中的第一個值，
同時還可以傳遞多個參數(shù)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="lib/vue.min.js"></script>
<style type="text/css">
</style>
</head>
<body>
<div id="app">
<h1>{{msg |msgFormat('討論')}}</h1>
</div>
</body>
<script>
Vue.filter('msgFormat',function(msg,arg){
return msg.replace(/學習/g,arg);
})
var vm = new Vue({
el:'#app',
data:{
msg:"我是一個愛學習的人，學習各種技術(shù)"
}
})
</script>
</html>
同時可以進行多次過濾
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="lib/vue.min.js"></script>
<style type="text/css">
</style>
</head>
<body>
<div id="app">
<h1>{{msg |msgFormat('討論')|test}}</h1>
</div>
</body>
<script>
Vue.filter('msgFormat',function(msg,arg){
return msg.replace(/學習/g,arg);
})
Vue.filter('test',function(msg){
return msg+'=====';
})
var vm = new Vue({
el:'#app',
data:{
msg:"我是一個愛學習的人，學習各種技術(shù)"
}
})
</script>
</html>
實際中經(jīng)常會使用到的實例
Vue.filter('dateFormat', function (dateStr, pattern = "") {
// 根據(jù)給定的時間字符串，得到特定的時間
var dt = new Date(dateStr)
// yyyy-mm-dd
var y = dt.getFullYear()
var m = dt.getMonth() + 1
var d = dt.getDate()
// return y + '-' + m + '-' + d
if (pattern.toLowerCase() === 'yyyy-mm-dd') {
return `${y}-${m}-$ytj6qwk`
} else {
var hh = dt.getHours()
var mm = dt.getMinutes()
var ss = dt.getSeconds()
return `${y}-${m}-$cqot1qo ${hh}:${mm}:${ss}`
}
})
同時如果頁面中存在兩個Vue對象，針對每個對象可以定義私有過濾器，如下
// 如何自定義一個私有的過濾器（局部）
var vm2 = new Vue({
el: '#app2',
data: {
dt: new Date()
},
methods: {},
filters: { // 定義私有過濾器 過濾器有兩個 條件 【過濾器名稱 和 處理函數(shù)】
// 過濾器調(diào)用的時候，采用的是就近原則，如果私有過濾器和全局過濾器名稱一致了，這時候 優(yōu)先調(diào)用私有過濾器
dateFormat: function (dateStr, pattern = '') {
// 根據(jù)給定的時間字符串，得到特定的時間
var dt = new Date(dateStr)
// yyyy-mm-dd
var y = dt.getFullYear()
var m = (dt.getMonth() + 1).toString().padStart(2, '0')
var d = dt.getDate().toString().padStart(2, '0')
if (pattern.toLowerCase() === 'yyyy-mm-dd') {
return `${y}-${m}-$xthwsx0`
} else {
var hh = dt.getHours().toString().padStart(2, '0')
var mm = dt.getMinutes().toString().padStart(2, '0')
var ss = dt.getSeconds().toString().padStart(2, '0')
return `${y}-${m}-$xy1kscr ${hh}:${mm}:${ss} ~~~~~~~`
}
}
},
