过滤器的简单使用,看代码:
注意:当私有过滤器和全局过滤器方法名称一样时,采用就近原则,优先调用私有过滤器。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>过滤器的使用</title>
<script type="text/javascript" src="../assets/js/vue.js"></script>
<link rel="stylesheet" href="../assets/css/bootstrap-3.3.7.css">
</head>
<body>
<h1>过滤器的使用</h1>
<div id="app">
{{msg | filterData(msg)}}<br>
{{dataStr | dateFilter(dataStr)}}
</div>
<script type="text/javascript">
/*过滤器的使用 全局过滤器
Vue.filter('过滤器的名称',function () {})*/
Vue.filter('filterData',function (msg) {
console.log('进入到过滤器了')
return msg+"123";
});
Vue.filter('dateFilter',function (dataStr) {
var date=new Date(dataStr);
var y=date.getFullYear();
var m=date.getMonth()+1;
var d=date.getDate();
//return y+'-'+m+'-'+d;
return `${y}-${m}-${d}`;
});
var app = new Vue({
el:"#app",
data:{
msg:"曾经我也是一个单纯的孩子,理想深远",
dataStr:"2019-01-09 14:45:33.057"
},
filters:{} //定义私有过滤器
})
</script>
</body>
</html>