vue.js（12）--过滤器

Posted qiqisusu

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue.js（12）--过滤器相关的知识，希望对你有一定的参考价值。

vue中的全局过滤器与定义私有过滤器

全局过滤器

<!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:‘我是天下第一帅，我是天下第一美丽，我是天下第一可爱‘
            
        )
    </script>
</body>
</html>

 

通过vue.filter(‘过滤器名称‘，function（参数）过滤方式，返回过滤后值)的方式定义一个全局过滤器。

使用过滤器的方式格式是 要处理的字符 | 过滤器的名称

replace（‘替换字符’，‘被替换字符’）方法的使用

定义私有过滤器

<script>
var vm= new Vue(  //创建vue实例
            el:‘.app‘,
            data:
                arr:[
                    ‘id‘:1,‘name‘:‘iPhone‘,‘time‘:new Date(),
                    ‘id‘:2,‘name‘:‘华为‘,‘time‘:new Date(),
                    ‘id‘:3,‘name‘:‘OPPO‘,‘time‘:new Date()
                ], //创建一些初始数据与格式
                id:‘‘,
                name:‘‘,
                keywords:‘‘  //初始化参数keywords为空
            ,
            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++++++`
                
            //******创建一个私有过滤器******/
        )
</script>

自定义私有过滤器形式：fliters：过滤器名称：function （）

padStart方法在头部填充字符（字符串独有）实例、：时间字符串填充0

padEnd方法在尾部填充字符串

 

以上是关于vue.js（12）--过滤器的主要内容，如果未能解决你的问题，请参考以下文章

如何使用 Vue.js 对 ajax 重复列表应用过滤器？

如果选择“全部”，则重置过滤器 Vue Js

Vue.js 过滤器在本地工作，但不在服务器上

基于具有唯一值的数组创建多个动态选择过滤器以过滤 Vue.js 中的另一个数组

在 Vue JS 中，从 vue 实例中的方法调用过滤器，但 $options 未定义

如何在vue js的过滤器搜索中添加大于等于的条件