Vue.Js中过滤器的简单使用vue中过滤器的简单使用！vue.js中允许我们自定义过滤器对一些常见的文本进行格式化操作

| 作者：江夏

| 公众号：1024笔记

本文一共641字，阅读时长4分钟

Vue.js中允许我们自定义过滤器对一些常见的文本进行格式化操作。由管道符指示, 语法格式如下：

{{ message | filter}}

接下来通过一个具体示例，分析Vue.Js中过滤器的简单使用，新建一个vue.js文件，具体代码如下：

<template>
    <div class = "Demo1">
         <p>原字符：{{text}}</p>
         <p>无参数过滤替换：{{text|textFilter}}</p>
         <p>传参过滤替换：{{text|textFilter1("传参")}}</p>
         <p>首字母大写过滤：{{text|fanzhuangfilter}}</p>
         <!--过滤器还可以串联，使用多个管道符分割开多个过滤器即可-->
         <p>过滤器串联：{{text|textFilter|fanzhuangfilter}}</p>
    </div>
</template>
<script>
export default {
    name:"guolvqi",
    data(){
        return {
            text:"aabbbccc"
        }
    },
    methods:{
    },
    filters:{
            //定义一个字符替换的过滤器
            textFilter:function(value){
                value = value.toString()
                 //字符串的replace 方法的第一个参数，除了可写一个字符串之外，还可以定义一个正则表达式，g表示全局替换，不然只替换第一个a
                 return value.replace(/a/g,'d');
            },
            //定义一个可以传参的字符替换过滤器，根据传递的参数，指定替换，不用写死
            textFilter1:function(value,arg){
                value = value.toString()
                 return value.replace(/a/g,arg);
            },
            //定义一个第一个字符大写的过滤器
            fanzhuangfilter:function(value){
                //如果字符串为空，直接返回
                if(!value){
                    return value
                }
                value = value.toString();
                return value.charAt(0).toUpperCase()+value.slice(1);
            }
        }
}
</script>
<style scoped>
</style>

在index.js配置该页面的路径，然后在vscode的终端输入npm run dev，运行程序，在浏览器输入具体的地址，输出结果如下：

以上就是在Vue.Js中过滤器的简单使用。关于在vue中如何使用过滤器对时间进行格式化可以参考文章如何在Vue.js中对时间格式化

历史文章