过滤器(Vue3 已经移除)
定义:对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理)
注册过滤器:
// 全局过滤器 Vue.filter(name,callback) //局部过滤器 new Vue{filters:{}}
使用过滤器:
{{ xxx | 过滤器名}} 或 v-bind:属性 = "xxx | 过滤器名"
备注:
1)过滤器可以接收额外参数,多个过滤器也可以串联
2)并没有改变原本的数据,而是产生新的对应的参数
理解过滤器
1)功能:对要显示的数据进行特定格式化后再显示
2)注意:并没有改变原本的数据,是产生新的对应的数据
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="../js/vue.js"></script> <script type="text/javascript" src="../js/dayjs.min.js"></script> </head> <body> <!--准备好一个容器--> <div id="root"> <h2>显示格式化后的时间</h2> <!--计算属性实现--> <h3>(计算属性实现)现在是:{{fmtTime}}</h3> <!--methods实现--> <h3>(methods实现)现在是:{{getFmtTime()}}</h3> <!--过滤器实现--> <h3>(过滤器)现在是:{{time | timeFormater}}</h3> <!--过滤器实现(传参)--> <h3>(过滤器传参)现在是:{{time | timeFormater('YYYY-MM-DD') | mySlice}}</h3> </div> <script type="text/javascript"> // 阻止 vue 在启动时生成生产提示 Vue.config.productionTip = false // 全局过滤器 Vue.filter("mySlice",function (value){ return value.slice(0,4) }) new Vue({ el:"#root", data:{ // 获取时间戳 Date.now() time:1695613193196 }, computed:{ fmtTime(){ // Day.js 是一个轻量的处理时间和日期的 JavaScript 库 return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss') } }, methods:{ getFmtTime(){ // Day.js 是一个轻量的处理时间和日期的 JavaScript 库 return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss') } }, // 局部过滤器 // 过滤器配置项,对数据进行加工 filters:{ // 这里的value,是通过{time | timeFormater}}中的time作为参数传入的 timeFormater(value,str="YYYY年MM月DD日 HH:mm:ss"){ // Day.js 是一个轻量的处理时间和日期的 JavaScript 库 return dayjs(value).format(str) }, // mySlice(value){ // return value.slice(0,4) // } } }) </script> </body> </html>
标签:Vue,return,18,value,YYYY,time,过滤器 From: https://www.cnblogs.com/REN-Murphy/p/17727641.html