Vue-过滤器的使用

最新推荐文章于 2023-01-12 12:50:34 发布

原创最新推荐文章于 2023-01-12 12:50:34 发布 · 165 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #html

vue 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了Vue.js中使用mustache插值和v-bind表达式创建过滤器的方法，展示了如何定义并调用自定义过滤器，以及如何处理字符串替换和日期格式化的例子。重点讲解了全局过滤器的用法和局部过滤器的优先级应用。

使用位置：

mustachc插值
v-bind表达式
添加在JavaScript的尾部
调用时的格式{{name | 过滤器的名称1 | 过滤器的名称N}}
格式Vue.filter('过滤器的名称'，function(data){return data+'123'})过滤器function中的第一个参数已经被固定死，永远都是过滤器管道符前面传递过来的数据
过滤器可以处理多个数据

字符串的replace方法第一个参数课下字符串和正则表达式（/正则/g(全局匹配)）
padStart(maxlength,'补的内容')可以补全不够位的数据---（1=》01）

全局过滤器案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
    <div id="app">
            {{msg | msgFormat('123','12313') | test}}
    </div>  
    <script>
        Vue.filter('msgFormat',function(msg,arg,arg2){

            //
         return  msg.replace(/山/g,arg+arg2) 
        })
        Vue.filter('test',function(test){
            return test+'fiul,fkosdihjsedmf'
        })

        var vm= new Vue({
            el:"#app",
            data:{
                msg:'曾经啊啊啊，山的那边还有山',
            },
            methods:{

            }
        })
    </script>
    
</body>
</html>

修改时间格式案例

 <tr >
     
     <td> {{ item.ctime| dateFormat }} </td>
     
  </tr>
<script>
        Vue.filter('dateFormat',function(datestr,pattern=""){
            var dt= new Date(datestr)
            var y=dt.getFullYear()
            var m=dt.getMonth()+1.toString().padstart(2,'0')//填充两位
            var d=dt.getDate().toString().padstart(2,'0')
            // return `${y}-${m}-${d}`

            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}`
            }
        })
        var vm = new Vue({
            el:'#app',
            data:{
                id:'',
                name:'',
                keywords:'',
                list:[
                         {ctime:new Date()},
                     ]
                 },
            methods:{
                add(){
                    var car ={ id:this.id,name:this.name,ctime: new Date()}
                    // console.log('ok')
                    this.list.push(car)
                    this.id=this.name=''
                },
              
             
        }
    })

    </script>