溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家展示了“vue中過濾器filter怎么用”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“vue中過濾器filter怎么用”這篇文章吧。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- {{}}中的|表示過濾器管道符,過濾器后面的為過濾函數 -->
<p>{{msg | msgFormat('瘋狂+1')}}</p>
<!-- 多個過濾函數進行調用 -->
<p>{{msg | msgFormat('瘋狂+1') | test}}</p>
<h3>{{time | dateFormat}}</h3>
</div>
</body>
<script src="./js/vue.js"></script>
<script>
//過濾器的定義語法
//Vue.filter('過濾器的名稱',function () { })
//過濾器中的function,第一個參數data，已經被規定死，永遠都是過濾器管道符前面傳遞過來的數據
// 從第二個參數開始就是傳值
// Vue.filter('過濾器名稱',function(data){
// return data+123
// });
//定義一個Vue全局的過濾器，名字：msgFormat
Vue.filter('msgFormat',function(msg,param) {
//字符出中的replace方法，第一個參數，出了寫一個字符串之外，還可以定義一個正則
// return msg.replace('單純','邪惡');
// return msg.replace(/單純/g,'邪惡')
return msg.replace(/單純/g,param)
})
Vue.filter('test',function(msg) {
return msg+'love'
})
//如何定義一個私有過濾（局部）
var vm = new Vue({
el: '#app',
data: {
msg: '我也是一個單純的少年，單純到自己很可愛，我也會喜歡你',
time: new Date(),
},
//定義私有過濾器，過濾器有兩個條件[過濾器名稱 和 處理函數 ]
filters: {
/*
過濾器調用的時候，采用的是就近原則，
如果私有過濾器和全局過濾器名稱一致了，這時候優先調用私有過濾器
*/
//param = '';es6的初始化值
dateFormat: function(time,param = ''){
var dt = new Date(time);
// yyyy-mm-dd
var y = dt.getFullYear();
// var m = dt.getMonth()+1;
var m = (dt.getMonth()+1).toString().padStart(2,'0');
var d = dt.getDate();
// return y+'-'+m+'-'+d;
//模板字符串
// return `${y}-${m}-$aegqsqibtmh`;
if(param.toLowerCase() === 'yyyy-mm-dd'){
return `${y}-${m}-$aegqsqibtmh`;
}else{
var hh = dt.getHours();
var mm = (dt.getMinutes()).toString().padStart(2,'0');
var ss = dt.getSeconds();
return `${y}-${m}-$aegqsqibtmh ${hh}:${mm}:${ss}`
}
}
},
methods: { }
})
</script>
</html>
[點擊并拖拽以移動]
效果圖
以上是“vue中過濾器filter怎么用”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
