Vue的指令与过滤器---过滤器的基本使用

最新推荐文章于 2022-11-02 21:39:32 发布

代码搬运工的小马

最新推荐文章于 2022-11-02 21:39:32 发布

阅读量434

点赞数 2

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/cider_m/article/details/122919761

版权

vue 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

过滤器

注意：这是在Vue2的项目中可以使用

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

过滤器应该被添加在JavaScript表达式的尾部，由“管道符"进行调用，示例代码如下:

<!-- 在双括号中通过"管道符"调用 capitalize 过滤器,对,essage的值进行格式化 -->
<p>{{ message | capitalize}}</p>

<!-- 在 v-bind 中通过"管道符"调用formatId 过滤器对rawId 的值进行格式化 -->
<div v-bind:id="rawId | formatId"></div>

小案例:

将message的值首字母转为大写

<body>
    <div id="app">

        <p>message 的是{{message | capi}}</p>
    </div>
    <script src="./lib/vue-2.6.12.js"></script>
    <script>
         const app =new Vue ({
             el:"#app",
             data:{
                 message:'hello vue'
             },
             //过滤器函数，必须被定义到filters节点之下
             filters:{
                 //注意：过滤器函数形参中val，永远都是“管道符”前面的那个值
                capi(val){
                    //字符串有 charAt方法 这个方法接受索引值 表示从字符中把索引对应的字符，获取出来、
                    const first= val.charAt(0).toUpperCase()
                    const other=val.slice(1)
                    // 强调：过滤器中 一定要有一个返回值
                    return first + other
                }
             }
         })
    </script>
</body>

呈现出的效果图如下:

代码搬运工的小马

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue的指令与过滤器---过滤器的基本使用

过滤器注意：这是在Vue2的项目中可以使用过滤器(Filters) 是vue为开发者提供的功能，常用于文本的格式化。过滤器可以用在两个地方:插值表达式和v-bind属性绑定。过滤器应该被添加在JavaScript表达式的尾部，由“管道符"进行调用，示例代码如下:<p>{{ message | capitalize}}</p><...
复制链接

扫一扫