filter 过滤器

最新推荐文章于 2022-05-08 08:35:32 发布

棋炜的小宝贝

最新推荐文章于 2022-05-08 08:35:32 发布

阅读量195

点赞数

分类专栏：过滤器文章标签：过滤器 filter

本文链接：https://blog.csdn.net/XWen_ING/article/details/109346212

版权

过滤器专栏收录该内容

1 篇文章 0 订阅

订阅专栏

需求：前端编写一个输入框，用户输入英文字母后，需要将其转换为大写进行页面显示。

变量 toUpperCase() 转换为大写

一些简单的业务逻辑，在插值表达式里面是可以完成的。但是需要注意，开发理念不建议在插值表达式里面书写太多的业务代码，纯粹的输出。如果有业务代码建议做其他的一些操作，例如定义函数处理。

语法：模型变量 | 过滤器（vuejs提供一些特殊的标识符，函数）
表现形式：拿 | 前面的操作的返回结果作为输出 | 后面的输入

类似Linux操作系统里面的管道类似 php里面的 smarty 模板引擎里面的变量调节器

uppercase：表示大写字母
lowercase ：表示小写字母
capitalize：首字符会转换成大写，其余字符不做改变。

<body>
<div id="app">    
    用户名：
    <input type="text" v-model="username">

    <p>普通操作：<b>{{ username.toUpperCase() }}</b></p>
    <p>函数处理：{{ myToUpperCase() }}</p>

    <p>filter 过滤器：<b>{{ username | uppercase }}</b></p>
    <p>filter 过滤器(首字母大写)：<b>{{ username | capitalize }}</b></p>
    <p>filter 过滤器(首字母大写)(先转小写，然后首字母大写)：<b>{{ username | lowercase | capitalize }}</b></p>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/1.0.22/vue.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
        },
        methods: {
            myToUpperCase(){
                return this.username.toUpperCase();
            }
        }
    });
</script>

在这里插入图片描述

棋炜的小宝贝

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
filter 过滤器

需求：前端编写一个输入框，用户输入英文字母后，需要将其转换为大写进行页面显示。变量 toUpperCase() 转换为大写一些简单的业务逻辑，在插值表达式里面是可以完成的。但是需要注意，开发理念不建议在插值表达式里面书写太多的业务代码，纯粹的输出。如果有业务代码建议做其他的一些操作，例如定义函数处理。语法：模型变量 | 过滤器（vuejs提供一些特殊的标识符，函数）表现形式：拿 | 前面的操作的返回结果作为输出 | 后面的输入类似Linux操作系统里面的管道类似 php里面的 s
复制链接

扫一扫