全局过滤器filter的用法

news/2025/2/26 21:42:44

**1.**注册在全局的fliter
(1)全局方法 Vue.filter() 注册一个自定义过滤器,必须放在Vue实例化前面
(2) 过滤器函数始终以表达式的值作为第一个参数。带引号的参数视为字符串,而不带引号的参数按表达式计算
(3)可以设置两个过滤器参数,前提是这两个过滤器处理的不冲突
(4)用户从input输入的数据在回传到model之前也可以先处理

废话不多说,上代码

vue自定义过滤器
        <input type="text" v-model="message | change"> <!--用户从input输入的数据在回传到model之前也可以先处理-->

    </div>
    <script type="text/javascript">


        Vue.filter("sum", function(value) {   //全局方法 Vue.filter() 注册一个自定义过滤器,必须放在Vue实例化前面
            return value + 4;
        });

        Vue.filter('cal', function (value, begin, xing) {   //全局方法 Vue.filter() 注册一个自定义过滤器,必须放在Vue实例化前面
            return value + begin + xing;
        });

        Vue.filter("change", {
            read: function (value) { // model -> view 在更新 `<input>` 元素之前格式化值
                return value;
            },
            write: function (newVal,oldVal) { // view -> model  在写回数据之前格式化值
                console.log("newVal:"+newVal); 
                console.log("oldVal:"+oldVal);
                return newVal;
            }
        });

        var myVue = new Vue({
            el: ".test",
            data: {
                message:12
            }
        });

    </script>
</body>

http://www.niftyadmin.cn/n/2752950.html

相关文章

在Maven上Web项目添加Spring框架

1. pom.xml添加Spring依赖包 <!-- spring 核心依赖--><!-- context依赖beans,aop,core,expression;core依赖logging;所以一次导入6个包--><dependency><groupId>org.springframework</groupId><artifactId>spring-context</artifactId&…

Ubuntu下 DevToolsActivePort file doesn't exist 错误

错误描述 Ubuntu下运行一个selenium调用无头chrome浏览器进行爬取的Python程序报出如下的错误&#xff1a; (unknown error: DevToolsActivePort file doesnt exist) (The process started from chrome location /usr/bin/google-chrome is no longer running, so ChromeDri…

LOW逼三人组(一)----冒泡算法

排序 1、冒泡排序 冒泡算法 import random # 随机模块 def bubble_sort(li): ###################################冒泡排序#####################################for i in range(len(li)-1): # 多少趟for j in range(len(li)-i-1): #一趟里多少次if li[j]>li…

浏览器输入URL回车会发生什么

这是一个非常经典的面试题,这道题没有具体的答案,它涉及很多的知识点&#xff0c;面试官会通过这道题了解你对哪一方面的知识比较擅长&#xff0c; 然后继续追问看看你的掌握程度。当然我写的这些也只是我的一些简单的理解&#xff0c;从前端的角度出发&#xff0c;我觉得首先回…

Redis:WRONGTYPE Operation against a key holding the wrong kind of value

错误信息 redis.clients.jedis.exceptions.JedisDataException: WRONGTYPE Operation against a key holding the wrong kind of value分析 当前程序中key的操作类型&#xff0c;并不与redis库中存在的key的类型相匹配。 举例&#xff1a; 第一次保存key&#xff0c;将其设…

epoll_wait会被系统中断唤醒

今天&#xff0c;当一个程序在epoll_wait阻塞时&#xff0c;用strace跟踪了一下&#xff0c;结果epoll_wait就被EINTR唤醒了&#xff0c;并且返回-1&#xff1b; 所以&#xff0c;当epoll_wait返回-1时&#xff0c;需要判断errno是不是EINTR&#xff0c;如果是&#xff0c;继续…

iOS开发常用代码块

遍历可变数组的同时删除数组元素 NSMutableArray *copyArray [NSMutableArray arrayWithArray:array]; NSString *str1 “zhangsan”; for (AddressPerson *perName in copyArray) { if ([[perName name] isEqualToString:str1]) { [array removeObject:perName]; } …

Redis 启动警告解决

警告 Increased maximum number of open files to 10032 (it was originally set to 1024).问题分析 这条警告是说&#xff1a;最大文件打开数不够。 解决方法一 如果是root用户&#xff0c;那么修改下 ulimit 就可以。 #查看系统限制 ulimit -a#设置“open files”数量 u…