一过滤器

<div id="app">
            <p>{{msg |msgFilter}}</p>
        </div>

<script>
        
        Vue.filter('msgFilter',function(msg){
            
            return msg.replace(/我/g,'大名')
        })
         new Vue({
            el:'#app',
            data:{
                msg:'我为人人,人人为我'
            }
         })
    </script>

图片.png

也可以传递多个参数，用+号连接


<div id="app">
            <p>{{msg |msgFilter('嘿嘿嘿','费玉污')}}</p>
        </div>

Vue.filter('msgFilter',function(msg,arg,arg2){
            
            return msg.replace(/我/g,arg+arg2)
        })

图片.png

vue.filter
定义正则表达式
过滤器可以调用多次过滤器

<p>{{msg |msgFilter('嘿嘿嘿','费玉污')|test}}</p>
Vue.filter('test',function(msg){
            return msg+'zz'
        })

图片.png

定义私有过滤器

new Vue({
            el:'#app',
            data:{
                msg:'我为人人,人人为我'
            },
            filters:{
                // 
                dataFormat:function(datastr,pattern=''){
                    let data = new Date(datastr)
                    let year = data.getFullYear()
                    let month = (data.getMonth() + 1).toString().padStart(2,'0')
                    let day = data.getDate().toString().padStart(2,'0')
                    let hour = data.getHours().toString().padStart(2,'0')
                    let minute = data.getMinutes().toString().padStart(2,'0')
                    let second = data.getSeconds().toString().padStart(2,'0')
                    // return year + '-' + month + '-' + day
                    if(pattern.toLowerCase() === 'yyyy-mm-dd'){
                        return `${year}-${month}-${day}`
                    }else{
                        return `${year}-${month}-${day} ${hour}:${minute}:${second}`
                    }
                }
            }
         })

过滤器调用就近原则，私有和全局名称一致优先调用私有过滤器

vue自定义按键修饰符

 <input type="button" value="添加" class="btn btn-primary" @click.enter="add">

 <input type="button" value="添加" class="btn btn-primary" @click.f2="add">
 Vue.config.keyCodes.f2 = 113

vue学习02

vue学习02

一过滤器