Vue中的过滤器 filter

最新推荐文章于 2024-09-05 13:30:00 发布

小盆友你是否很有多问号

最新推荐文章于 2024-09-05 13:30:00 发布

阅读量178

点赞数

分类专栏：前端文章标签： Vue filter 自定义过滤器数据绑定大写转换

本文链接：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>