**过滤器的使用 **

119 阅读1分钟
  • 注册:Vue.filter('函数名',()=>{})
  • 使用:模板中 用管道符 | 分隔开 {{data里的变量名 | 过滤器函数名()}}
//Vue.filter(过滤器的名称,处理函数) 全局使用

Vue.filter("forMat", (data) => {
// data 为源头数据
  var t = new Date(data);
  var yy = t.getFullYear();
  var mm = (t.getMonth() + 1).toString().padStart(2, 0);
  var dd = t.getDate().toString().padStart(2, 0);
  return `${yy}-${mm}-${dd}`;
})

//用插件需要先下载包 `dayjs`
 import dayjs from "dayjs";
 //p1 为 forMat函数传递的参数
 Vue.filter("forMat", (data,p1) => {
   return dayjs(data).format(p1);

//列子

`
<div id="app">
<h3>{{ viewContent | addNamePrefix }}</h3>
</div>
<script>
//**参数一:是过滤器的名字;**

**参数二:处理函数,处理函数的参数同上。。。**
  Vue.filter("addNamePrefix", (value) => {
  return "my name is" + value
  })
  
  let vm = new Vue({
      el:"#app",
      data:{
           viewContent:"游哥"
         }
    })
</script>
           

`