VUE学习(八)、过滤器
过滤器:
vue3已经不推荐使用过滤器
定义:对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理)。
语法:
1.注册过滤器:Vue.filter(name,callback) 或 new Vue{filters:{}}
2.使用过滤器:{{ xxx | 过滤器名}} 或 v-bind:属性 = “xxx | 过滤器名”
备注:
1.过滤器也可以接收额外参数、多个过滤器也可以串联
2.并没有改变原本的数据, 是产生新的对应的数据
3.vue中全局和局部过滤器里面的this都是window对象,而不是vm对象
<head>
<meta charset="UTF-8" />
<title>过滤器</title>
<script type="text/javascript" src="../js/vue.js"></script>
<!--
Day.js 是一个轻量的处理时间和日期的 JavaScript 库,
和 Moment.js 的 API 设计保持完全一样. 如果您曾经用过 Moment.js,
那么您已经知道如何使用 Day.js
-->
<script type="text/javascript" src="../js/dayjs.min.js"></script>
</head>
<body>
<!--
过滤器:
vue3已经不推荐使用过滤器
定义:对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理)。
语法:
1.注册过滤器:Vue.filter(name,callback) 或 new Vue{filters:{}}
2.使用过滤器:{{ xxx | 过滤器名}} 或 v-bind:属性 = "xxx | 过滤器名"
备注:
1.过滤器也可以接收额外参数、多个过滤器也可以串联
2.并没有改变原本的数据, 是产生新的对应的数据
3.vue中全局和局部过滤器里面的this都是window对象,而不是vm对象
-->
<!-- 准备好一个容器-->
<div id="root">
<h2>显示格式化后的时间</h2>
<!-- 计算属性实现 -->
<h3>现在是:{{fmtTime}}</h3>
<!-- methods实现 -->
<h3>现在是:{{getFmtTime()}}</h3>
<!-- 过滤器实现 (此处time是作为一个参数传递给timeFormater)-->
<h3>现在是:{{time | timeFormater}}</h3>
<!-- 过滤器实现(传参)收到的第一个参数一定是过滤器管道符前边的参数 -->
<h3>现在是:{{time | timeFormater('YYYY_MM_DD')}}</h3>
<!--
多个过滤器互联
每一个管道符前的表达式的值将会作为下一个过滤器的值
-->
<h3>现在是:{{time | timeFormater('YYYY_MM_DD') | mySlice}}</h3>
<!--
过滤器不一定只能用在插值语法中,例如v-bind中使用(很罕见)
v-model中不能使用这个过滤器
-->
<h3 v-bind:x="msg | mySlice">学习vue</h3>
</div>
<!-- 测试全局过滤器 -->
<div id="root2">
<h2>{{msg | mySlice}}</h2>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false;
//全局过滤器
Vue.filter("mySlice", function (value) {
//console.log(this)
// 截取字符串
return value.slice(0, 4);
});
new Vue({
el: "#root",
data: {
//time:1621561377603, //时间戳
time: new Date().getTime(),
msg: "我在学习vue"
},
// 计算属性
computed: {
fmtTime() {
// dayjs()是引入dayjs文件后具有的一个全局函数
// 如果不传参则格式化当前时间,传参为时间戳
return dayjs(this.time).format("YYYY年MM月DD日 HH:mm:ss");
}
},
// 方法
methods: {
getFmtTime() {
return dayjs(this.time).format("YYYY年MM月DD日 HH:mm:ss");
}
},
//局部过滤器
filters: {
// str为模板字符(默认YYYY年MM月DD日 HH:mm:ss)
timeFormater(value, str = "YYYY年MM月DD日 HH:mm:ss") {
// console.log('@',value)
return dayjs(value).format(str);
}
}
});
new Vue({
el: "#root2",
data: {
msg: "vue-yyds-good"
}
});
</script>