一.过滤器分全局和局部过滤器
一.一.私有过滤器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 过滤器Filters可以在两个地方使用的: 插值表达式和v-bind属性绑定 -->
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<p>message的值是:{{ message | filterMessage}}</p>
<hr>
<p :title="message | filterMessage">哈哈哈哈</p>
</div>
<script>
const app = new Vue({
el: "#app",
data() {
return {
message:"hello,Vue.js"
}
},
filters:{
filterMessage(val) {
return val.split('').reverse().join('')
}
}
})
</script>
</body>
</html>
实际截图
image.png
二.全局过滤器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 过滤器Filters可以在两个地方使用的: 插值表达式和v-bind属性绑定 -->
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<p>message的值是:{{ message | filterMessage}}</p>
<hr>
<p :title="message | filterMessage">哈哈哈哈</p>
</div>
<script>
// 1.全局过滤器的定义 独立于每个VM实例之外
// 2.Vue.filter() 方法接收两个参数
// 3.第 1 个参数,实际全局过滤器的 "名字"
// 4. 第二个参数,是全局过滤器的 "处理函数"
Vue.filter('filtersMessage', function(info) {
console.log(info);
return "哈哈哈"
})
const app = new Vue({
el: "#app",
data() {
return {
message: "hello,Vue.js"
}
},
})
</script>
</body>
</html>
实际截图
image.png
过滤器-时间过滤小案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 导入dayJs 库 -->
<script src="https://unpkg.com/dayjs@1.8.21/dayjs.min.js"></script>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<h1> {{ time | dateFormat }} </h1>
<img src="./img/13过滤器传参问题.png" alt="">
</div>
<script>
// 全局的过滤器
Vue.filter('dateFormat', function (val) {
// 直接调用dayJs得到的是当前时间
// dayjs().format()
// dayJs(给定的时间)得到的是指定的时间
dayjs(val).format('YYYY-MM')
})
const app = new Vue({
el: "#app",
data() {
return {
time: new Date()
}
},
// 私有的过滤器
filters: {
dateFormat(val) {
console.log(val);
return dayjs(val).format('YYYY-MM-DD HH:mm:ss')
}
}
})
</script>
</body>
</html>
实际截图
image.png
网友评论