Vue入门指南——过滤器

栏目: IT技术 · 发布时间: 4年前

内容简介:格式化数据,比如将字符串格式化为首字母大写,将日期格式化为指定的格式等过滤器中的 function 里的第一个参数,已经被规定死了,永远都是 过滤器 管道符前面传递过来的数据。过滤器可以用在两个地方: 插值表达式 和 v-bind 表达式。

目录:

一、过滤器的作用是什么?

格式化数据,比如将字符串格式化为首字母大写,将日期格式化为指定的格式等

二、自定义全局过滤器

过滤器中的 function 里的第一个参数,已经被规定死了,永远都是 过滤器 管道符前面传递过来的数据。

Vue.filter(‘过滤器名称’, function(value){
	// 过滤器业务逻辑
})

三、 全局过滤器的使用

过滤器可以用在两个地方: 插值表达式 和 v-bind 表达式。

<div>{{msg | upper}}</div> 
<div>{{msg | upper | lower}}</div> 
<div v-bind:id=“id | formatId"></div>
// 定义一个全局过滤器

Vue.filter('dataFormat', function (input, pattern = '') {

  var dt = new Date(input);

  // 获取年月日

  var y = dt.getFullYear();

  var m = (dt.getMonth() + 1).toString().padStart(2, '0');

  var d = dt.getDate().toString().padStart(2, '0');



  // 如果 传递进来的字符串类型,转为小写之后,等于 yyyy-mm-dd,那么就返回 年-月-日

  // 否则,就返回  年-月-日 时:分:秒

  if (pattern.toLowerCase() === 'yyyy-mm-dd') {

    return `${y}-${m}-${d}`;

  } else {

    // 获取时分秒

    var hh = dt.getHours().toString().padStart(2, '0');

    var mm = dt.getMinutes().toString().padStart(2, '0');

    var ss = dt.getSeconds().toString().padStart(2, '0');



    return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;

  }

});

四、局部过滤器

filters:{
	capitalize: function(){}
}
  1. HTML元素:
<td>{{item.ctime | dataFormat('yyyy-mm-dd')}}</td>
  1. 私有 filters 定义方式:
filters: { // 私有局部过滤器,只能在 当前 VM 对象所控制的 View 区域进行使用

    dataFormat(input, pattern = "") { // 在参数列表中 通过 pattern="" 来指定形参默认值,防止报错

      var dt = new Date(input);

      // 获取年月日

      var y = dt.getFullYear();

      var m = (dt.getMonth() + 1).toString().padStart(2, '0');

      var d = dt.getDate().toString().padStart(2, '0');



      // 如果 传递进来的字符串类型,转为小写之后,等于 yyyy-mm-dd,那么就返回 年-月-日

      // 否则,就返回  年-月-日 时:分:秒

      if (pattern.toLowerCase() === 'yyyy-mm-dd') {

        return `${y}-${m}-${d}`;

      } else {

        // 获取时分秒

        var hh = dt.getHours().toString().padStart(2, '0');

        var mm = dt.getMinutes().toString().padStart(2, '0');

        var ss = dt.getSeconds().toString().padStart(2, '0');



        return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;

      }

    }

  }

五、带参数的过滤器

Vue.filter(‘format’, function(value, arg1){
	// arg1就是过滤器传递过来的参数
})

六、带参过滤器的使用

<div>{{date | format(‘yyyy-MM-dd')}}</div>

七、注意事项

  • 过滤器应该被添加在JavaScript表达式的尾部,由“管道”符号指示。
  • 过滤器不改变真正的data,而只是改变渲染的结果,并返回过滤后的版本。
  • 全局注册时是filter,没有s的。而局部过滤器是filters,是有s的。
  • 当有局部和全局两个名称相同的过滤器时候,会以就近原则进行调用,即:局部过滤器优先于全局过滤器被调用!

如果您也正在学习前端的路上,记得关注该博主,学习更多关于前端的知识~

博主主页 Poetic Code


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

互联网运营之道

互联网运营之道

金璞、张仲荣 / 电子工业出版社 / 2016-1 / 49.00

《互联网运营之道》内容由运营方法论切入,包括运营的江湖地位、运营的基本逻辑、运营的三大手段(内容运营、活动运营和用户运营)、数据统计方法,等等。虽然是讲方法论,但内容上却有着深入的运营逻辑思考和大量实战案例验证。在讲解了方法论之后,《互联网运营之道》逐步深入剖析如何反脆弱,如何做运营创新,以及如何从小到大切入细分市场,等等。 对于互联网公司来说,产品设计部门和研发部门保证了创意的实现,是从0......一起来看看 《互联网运营之道》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器