vue过滤器

定义

Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化。过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部,
简单介绍一下过滤器,顾名思义,过滤就是一个数据经过了这个过滤之后出来另一样东西,可以是从中取得你想要的,或者给那个数据添加点什么装饰,那么过滤器则是过滤的工具。

项目中filter的使用

  1. 在根目录创建/filter/index.js,在里面添加全局过滤器,比如一个格式化时间的过滤器
import Vue from 'vue';
// 自定义过滤起
Vue.filter('fomatDate', function (time) {
    let date = new Date(time);
    let Y = date.getFullYear();
    let M = date.getMonth() + 1;
    let D = date.getDate();
    return `${Y}年-${M}月-${D}日`
  })

  // 别的过滤器
  1. 在main.js中导入过滤器
// 导入过滤器
import '@/filter/index';
  1. 在组件中使用过滤器 :value="item.saleDate | fomatDate" />
 <van-list style="margin-top: 10px;">
    <van-cell v-for="(item,index) in list" 
    :key="index" 
    :title="item.name"  
    :value="item.saleDate | fomatDate" />
</van-list>
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 在这个教程中,我们将会通过几个例子,了解和学习VueJs的过滤器。我们参考了一些比较完善的过滤器,比如orderB...
    嘉宝_Appian阅读 1,247评论 1 4
  • 此笔记关于filter的官方文档的一些讲解及个人的一些拓展 简单介绍一下过滤器,顾名思义,过滤就是一个数据经过了这...
    chenjieyi阅读 174,135评论 21 62
  • 在这个教程中,我们将会通过几个例子,了解和学习VueJs的过滤器。我们参考了一些比较完善的过滤器,比如orderB...
    一缕清风1144阅读 4,944评论 0 1
  • 官网搬运工 Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化。过滤器可以用在两个地方:双花括号插值和...
    广告位招租阅读 143评论 0 2
  • 前一段时间,《中国诗词大会》节目非常火爆。节目不但让复旦附中的武亦姝瞬间家喻户晓,成为网红,也成了无数家长和学生心...
    可的视界阅读 606评论 5 8

友情链接更多精彩内容