Vue中的过滤器 filter

最新推荐文章于 2024-03-27 19:03:39 发布

小盆友你是否很有多问号

最新推荐文章于 2024-03-27 19:03:39 发布

阅读量158

点赞数

分类专栏：前端文章标签： vue.js vue 过滤器 filter asynctask

本文链接：https://blog.csdn.net/qq_43369949/article/details/118633154

版权

前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

Vue中的过滤器 filter

filter是啥？在.net core 中也有这玩意。
Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：
案列：

<body>
    <div id="app">
        <!-- <input v-model.lazy="username">{{msg}} -->
        <input v-model="username">
        {{username|formatter}}  

    </div>

</body>
<script>
    var vm = new Vue({

        el: "#app",
        data: {
            username : "",
            msg:""
        },

        methods: {

        },
        watch: {
            username: function (val) {             
                if(val=="123456"){
                    this.msg ="用户名合法";
                }else{
                    this.msg ="用户名已经存在";
                }
                
            }
        },
        //局部过滤器
        filters: {
           formatter:function(val){
               //过滤器差值表达式写法 用|分开，后面是自己定义的过滤器名字
                //过滤器一般用于 bind属性绑定和差值表达式
                //输出的val就是username|formatter，就是username的值，也就是数据模型绑定的值
                //eg：把val的数据都变成大写
                return val.toUpperCase();  
           }
            
        }




    })
</script>

结果：
在这里插入图片描述

小盆友你是否很有多问号

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue中的过滤器 filter

Vue中的过滤器 filterfilter是啥？在.net core 中也有这玩意。Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：案列：<body> <div id="app"> <!-- <input v-model.lazy="username"
复制链接

扫一扫