Giter VIP home page Giter VIP logo

pipes's Introduction

过滤器(管道)


这里讲到过滤器,现在我更愿意称它为pipes(管道)。刚接触angular时,称它为过滤器,用来格式化数字(千分位)、日期、金额加¥,很方便。这也是我总结它的原因,总结的过程中看了官方文档,无论是angular还是vue,他们都提到了管道的概念,数据通过管道来转换格式,更方便理解了

框架使用情况 👇

框架 angular vue react
pipes ✖️
  • react没有pipe的概念并不代表他不能实现管道 👉参考

Angular-Pipes

AngularJS内置了很多过滤器,在HTML模板的绑定符号{{}}内通过|来调用管道

  1. 内置管道
  • 字母转换成大写
$scope.pageData.Str="cheng";
{{pageData.Str|uppercase}}//输出==>CHENG
  • 数字转换千分位
$scope.pageData.Num=1000;
{{pageData.Num|number}}//输出==>1,000
  • 日期格式转换
$scope.pageData.Date=new Date();
{{pageData.Date|date:'yy-MM-dd'}}//输出==>2020-01-10
  • 数字格式化成货币
$scope.pageData.Money=1000;
{{pageData.Money|currency:'¥'}}//输出==>¥1,000.00

2.自定义管道


vue-filters

可以在{{date|formatdate}}实现,或者使用'v-bind' <div v-bind:id="rawId | formatId"></div>

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.