Private global filter as defined in the filter vue

Global Filters

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>过滤器</title>
    <script src="../lib/vue.js"></script>
</head>
<body>
    <div class="app">
        <p>{{ msg | myFormat('哈哈哈哈哈') }}</p>
    </div>
    <script>
        Vue.filter('myFormat',function(msg,n) {
            
            return msg.replace(/一/g,n)
        })
        var vm = new Vue({
            el:'.app',
            data:{
                msg:' I am the best in the world handsome, I am beautiful best in the world, I am the best in the world cute ' 
            } 
        }) 
    </ Script > 
</ body > 
</ HTML >

It is defined by a global filter vue.filter ( 'Filter Name', function (parameter) {filtration, the filtered return value}) manner.

Using filters manner {character format to be processed {|}} filter name

Use Replace ( 'replacement character' 'is replaced by the character') Method

Define private filters

< Script > 
var VM =  new new Vue ({   // Create instance vue 
            EL: ' .app ' , 
            Data: { 
                ARR: [ 
                    { ' ID ' : . 1 , ' name ' : ' the iPhone ' , ' Time ' : new new a Date ( )}, 
                    { ' ID ' : 2 , ' name ' : 'Huawei ' , ' Time ' : new new a Date ()}, 
                    { ' ID ' : . 3 , ' name ' : ' the OPPO ' , ' Time ' : new new a Date ()} 
                ], // Create some initial data and format 
                ID: ' ' , 
                name: ' ' , 
                keywords: ' '   // initialization parameter keywords empty 
            }, 
            directives: { 
                Focus: {
                    inserted:function(el) {
                        el.focus()
                    }
                }
            },//自定义指令
            filters:{
                timeFormat:function (dataStr) {
                    var myData=new Date(dataStr)
                    var y=myData.getFullYear()
                    var m=(myData.getMonth() + 1).toString().padStart(2,'0')
                     Var d = myData.getDate (). ToString (). PadStart ( 2 , ' 0 ' )
                     var h = myData.getHours (). ToString (). PadStart ( 2 , ' 0 ' )
                     var mm = myData.getMinutes ( ) .toString (). padStart ( 2 , ' 0 ' )
                     var s = myData.getSeconds (). toString (). padStart ( 2 , ' 0 ' )
                     return `$ {y} -{m} $ - $ {D} $ {H}: {mm} $: $ {S} ++++++ ` 
                } 
            } // ****** ***** create a private filter * / 
        })
 </ Script >

Custom filters in the form of private: fliters: {Filter Name: function () {}}

padStart method of filling a character (string unique) instance in the head: string fill time 0

The method of filling a string at the end padEnd

vue.js (12) - Filter

Private global filter as defined in the filter vue

Global Filters

Define private filters

Guess you like