Vue项目使用Filter函数格式化数据并全局生效

代码 · 2023-11-29

Filter(过滤器)

Vue允许你自定义过滤器,可被用于一些常见的文本格式化。过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部,由“|”符号指示

官网文档地址:过滤器-Vue.js
<template>
    <div>
        <h1>{{title}}</h1>
        <h1>{{title | titleFormat}}</h1>
            <!-- 使用符号'|'连接变量和filters函数 -->
    </div>
</template>

<script>
    export default {
        data() {
            return {
                title: '这是1处1理1后111的1标题1'
            }
        },
        filters: {
            titleFormat(value) {
                    //在这里实现需要的功能,如字符串剔除操作
                const reg = new RegExp("1","g")
                return value.replace(reg, '')
            }
        }
    }
</script>

效果如图所示

Vue项目使用Filter函数格式化数据并全局生效

Theme Jasmine by Kent Liao