A: hi! ~ Hello everyone, I am YK bacteria 🐷, a microsystem front-end ✨, love to think, love to summarize, love to record, love to share 🏹, welcome to follow me 😘 ~ [wechat account: Yk2012Yk2012, wechat public account: ykyk2012]

“This is the 22nd day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021.”

Today we are going to focus on vue.filter in Vue

1. Understand filters

Definition: The data to be displayed after a specific format (for some simple logic processing).

Grammar:

  1. Registration filter:Vue.filter(name,callback) 或 new Vue{filters:{}}
  2. Use filters:{{| XXX filter name}} 或 V - bind: attribute = | filter name "XXX"

Remark:

  1. Filters can also receive additional parameters, and multiple filters can be connected in series
  2. It doesn’t change the original data, it generates new corresponding data

2. The coding

1). Define filters

Global filter

Vue.filter(filterName, function(value[,arg1,arg2,...]){
  // Perform some data processing
  return newValue
})
Copy the code

Local filter

new Vue{
    filters: {filterName(value){
            return newValue
        }
    }
}
Copy the code

2). Use filters

<div>{{myData | filterName}}</div>
<div>{{myData | filterName(arg)}}</div>
Copy the code

The sample

<body>
    <div id="demo">
        <h2>Displays the formatted date and time</h2>
        <p>{{date}}</p> 
        <p>The full version: {{date | dateString}}</p>
        <p>(date) (month) (year) : {{date | dateString (' YYYY - MM - DD)}}</p>
        <p>When minutes: {{date | dateString (HH: mm: ss ")}}</p>
    </div>

    <script src=".. /js/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.1/moment.js"></script>
    <script>
        Vue.filter('dateString'.function(value, format='YYYY-MM-DD HH:mm:ss'){
            return moment(value).format(format);
        });

        new Vue({
            el: '#demo'.data: {
                date: new Date()}})</script>
</body>
Copy the code

Using dayjs

<! DOCTYPEhtml>
<html>
<head>
    <meta charset="UTF-8" />
    <title>The filter</title>
    <script type="text/javascript" src=".. /js/vue.js"></script>
    <script type="text/javascript" src=".. /js/dayjs.min.js"></script>
</head>
<body>
    <! -- Get a container ready -->
    <div id="root">
        <h2>Displays the time after formatting</h2>
        <! -- Compute property implementation -->
        <h3>Now: {{fmtTime}}</h3>
        <! -- Methods implementation -->
        <h3>Now: {{getFmtTime()}}</h3>
        <! -- Filter implementation -->
        <h3>Now is: {{time | timeFormater}}</h3>
        <! -- Filter implementation (pass parameters) -->
        <h3>Now is: {{time | timeFormater (' YYYY_MM_DD) | mySlice}}</h3>
        <h3 :x="msg | mySlice">Yet in silicon valley</h3>
    </div>

<div id="root2">
    <h2>{{msg | mySlice}}</h2>
</div>
</body>

<script type="text/javascript">
    Vue.config.productionTip = false
    // Global filter
    Vue.filter('mySlice'.function(value){
        return value.slice(0.4)})new Vue({
        el:'#root'.data: {time:1621561377603./ / timestamp
            msg:'Hello, Shang Silicon Valley.'
        },
        computed: {
            fmtTime(){
                return dayjs(this.time).format('YYYy-mm-DD' HH: MM :ss')}},methods: {
            getFmtTime(){
                return dayjs(this.time).format('YYYy-mm-DD' HH: MM :ss')}},// Local filter
        filters: {timeFormater(value,str='YYYy-mm-DD' HH: MM :ss'){
                // console.log('@',value)
                return dayjs(value).format(str)
            }
        }
    })

    new Vue({
        el:'#root2'.data: {msg:'hello,atguigu! '}})</script>
</html>
Copy the code

moment.js

Moment.js Momentjs.cn/is used

The introduction of

<script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.1/moment.js"></script>
Copy the code

usage

  1. Date formatting
moment().format('MMMM Do YYYY, h:mm:ss a'); // January 25, 2021, 9:51:41 PM
moment().format('dddd');                    / / Monday
moment().format("MMM Do YY");               // January 25, 21
moment().format('YYYY [escaped] YYYY');     // 2021 escaped 2021
moment().format();                          // 2021-01-25T21:51:41+08:00
Copy the code
  1. Relative time
moment("20111031"."YYYYMMDD").fromNow(); / / 9 years ago
moment("20120620"."YYYYMMDD").fromNow(); / / 9 years ago
moment().startOf('day').fromNow();        / / 1 day before
moment().endOf('day').fromNow();          // Within 2 hours
moment().startOf('hour').fromNow();       // 1 hour ago
Copy the code
  1. Calendar time
moment().subtract(10.'days').calendar(); / / 2021/01/15
moment().subtract(6.'days').calendar();  // Last Tuesday at 21:51
moment().subtract(3.'days').calendar();  // Last Friday at 21:51
moment().subtract(1.'days').calendar();  / / 21:51 yesterday
moment().calendar();                      / / 21:51 today
moment().add(1.'days').calendar();       / / 21:51 tomorrow
moment().add(3.'days').calendar();       // Next Thursday at 21:51
moment().add(10.'days').calendar();      / / 2021/02/04
Copy the code
  1. Multilingual support
moment.locale();         // zh-cn
moment().format('LT');   / / 21:51
moment().format('LTS');  / / 21:51:41
moment().format('L');    / / 2021/01/25
moment().format('l');    / / 2021/1/25
moment().format('LL');   // January 25, 2021
moment().format('ll');   // January 25, 2021
moment().format('LLL');  // January 25, 2021, 9:51 PM
moment().format('lll');  // January 25, 2021, 21:51
moment().format('LLLL'); // Monday, January 25, 2021, 9:51 PM
moment().format('llll'); // Monday, 25 January 2021 21:51
Copy the code

Finally, welcome to my column and make friends with YK bacteria