Vue过滤器使用方法详解

更新时间：2022年12月15日 16:59:23 作者：爱学习de测试小白

过滤器的功能是对要显示的数据进行格式化后再显示,其并没有改变原本的数据,只是产生新的对应的数据,下面这篇文章主要给大家介绍了关于Vue中过滤器定义以及使用方法的相关资料,需要的朋友可以参考下

前言

本篇来学习vue(仅适用vue2)中过滤器的基本用法

过滤器

过滤器（Filters）是vue为开发者提供的功能，常用于文本的格式化。可以用在两个地方：插值表达式和v-bind属性绑定。

私有过滤器

插值表达式中使用

<p>{<!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E-->{message | capital }}</p>

使用示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>过滤器基本使用</title>
</head>
<body>
<div id="app">
    <p>{{message | capital }}</p>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: 'hello 小白！'
        },
        // 定义过滤器一定要在filters中
        filters: {
            // 过滤器形参中的val 是管道符前面的值
            capital(val) {
                // 字符串 charAt(0)方法，取对应索引值
                console.log(val.charAt(0))
                // toUpperCase 转大写
                const first = val.charAt(0).toUpperCase()
                // slice 指定索引往回截取
                const other = val.slice(1)
                // 过滤器一定要有返回值
                return first + other
            }
        }
    })
</script>
</body>
</html>

v-bind属性绑定

<input type="text" v-bind:placeholder="message|capital">

使用示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>过滤器基本使用</title>
</head>
<body>
<div id="app">
    <input type="text" v-bind:placeholder="message|capital">
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: 'hello 小白！'
        },
        // 定义过滤器一定要在filters中
        filters: {
            // 过滤器形参中的val 是管道符前面的值
            capital(val) {
                // 字符串 charAt(0)方法，取对应索引值
                console.log(val.charAt(0))
                // toUpperCase 转大写
                const first = val.charAt(0).toUpperCase()
                // slice 指定索引往回截取
                const other = val.slice(1)
                // 过滤器一定要有返回值
                return first + other
            }
        }
    })
</script>
</body>
</html>

全局过滤器

使用Vue.filter()定义全局过滤器;接收两个参数第一个全局过滤名称，第二个全局过滤器的处理函数

使用示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>过滤器基本使用</title>
</head>
<body>
<div id="app">
    <p>{{message | capital }}</p>
</div>
<div id="app2">
    <input type="text" v-bind:placeholder="message|capital">
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    // 使用Vue.filter()定义全局过滤器;接收两个参数 第一个全局过滤名称，第二个 全局过滤器的处理函数
    Vue.filter('capital', function (val) {
        // 字符串 charAt(0)方法，取对应索引值
        console.log(val.charAt(0))
        // toUpperCase 转大写
        const first = val.charAt(0).toUpperCase()
        // slice 指定索引往回截取
        const other = val.slice(1)
        // 过滤器一定要有返回值
        return first + other
    })
    const app = new Vue({
        el: '#app',
        data: {
            message: 'hello 小白！'
        }
    })
    const app2 = new Vue({
        el: '#app2',
        data: {
            message: 'hello 大海！'
        }
    })
</script>
</body>
</html>

到此这篇关于Vue过滤器使用方法详解的文章就介绍到这了,更多相关Vue过滤器内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Vue.js展示AJAX数据简单示例讲解
当通过AJAX方式取回数据后，使用vue.js可以完美地按一定逻辑在页面上的展示数据，代码简单、优美、自然，而且便于与在用的页面框架集成，本文给大家介绍Vue.js展示AJAX数据简单示例
2017-03-03
Nuxt引入vue-persistedstate以及踩坑记录
这篇文章主要介绍了Nuxt引入vue-persistedstate以及踩坑记录,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-10-10
Vuex利用state保存新闻数据实例
本篇文章主要介绍了Vuex利用state保存新闻数据实例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-06-06
vscode中的vue项目报错Property ‘xxx‘ does not exist on type ‘Combin
这篇文章主要介绍了vscode中的vue项目报错Property ‘xxx‘ does not exist on type ‘CombinedVueInstance＜{ readyOnly...Vetur（2339），文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-09-09
使用vue-resource进行数据交互的实例
下面小编就为大家带来一篇使用vue-resource进行数据交互的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-09-09
Vue页面骨架屏注入方法
这篇文章主要介绍了Vue页面骨架屏注入的操作，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
2018-05-05
Nuxt.js实现一个SSR的前端博客的示例代码
这篇文章主要介绍了Nuxt.js实现一个SSR的前端博客的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-09-09
vue跨窗口通信之新窗口调用父窗口方法实例
由于开发需要,我需要在登录成功请求成功后,调用父窗口的一个点击事件方法,这篇文章主要给大家介绍了关于vue跨窗口通信之新窗口调用父窗口的相关资料,需要的朋友可以参考下
2023-01-01
vue如何监听页面的滚动的开始和结束
这篇文章主要介绍了vue如何监听页面的滚动的开始和结束，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-07-07
vue使用element-ui按需引入时踩过的那些坑
Element-UI是基于vue实现的一套不依赖业务的UI组件库,提供了丰富的PC端组件,减少用户对常用组件的封装,降低了开发的难易程度,下面这篇文章主要给大家介绍了关于vue使用element-ui按需引入时踩过的那些坑,需要的朋友可以参考下
2022-05-05