vue基础----过滤器filter

1.用的场景:一个功能在每个组件都能用,而computed虽然有缓存,但不能用在每一个组件,需要的话的每一个都需要写。

2.特点:改变数据的展示形式,不改变原有的形式

分为全局与局部的

  

    <div id="app">
    <!--{{msg | upper}} -->
      {{msg | upper("l")}}

    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>

       /* 过滤器的参数依此在flag后面添加 */
        Vue.filter("upper",function(value,flag){
            if(flag === ‘l‘){
                return value.toLowerCase();
            }
            return value.toUpperCase();
        })

        let vm  = new Vue({
            el:"#app",
            data:{
                msg:"liLy"
            },/*
            methods:{
                getUpper(){
                    return this.msg.toUpperCase();
                }
            },
            computed:{
                getUpper(){
                    console.log("121");
                    return this.msg.toUpperCase();
                }
            }
            */
        });
    </script>

原文地址:https://www.cnblogs.com/moon-yyl/p/11755173.html

时间: 2024-10-09 01:01:10

vue基础----过滤器filter的相关文章

vue的过滤器filter

前记: 排版记录,点耽误时间,我就简单的来,下面是一个vue 过滤器的写法,demo 演示,限制一个字符串的长度. vue filter 的官网介绍 https://cn.vuejs.org/v2/guide/filters.html 下面就具体拿自己的一个例子介绍: 某个filter.js // 限制汉字的个数 export const limitWordLength = Vue.filter('limitWordLength', (str, length, sufix) => { /* es

Vue入门三、过滤器filter

Vue中过滤器有两种:1.全局过滤器Vue.filter('过滤器名',过滤方式fn);2.组件内过滤器filters:{'过滤器名',过滤方式fn}使用:{{msg|过滤器方法名}} 一.局部过滤器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head>

从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十七 ║Vue基础:给博客首页加花样(二)

回顾 今天来晚辣,给公司做了一个小项目,一个瀑布流+动态视频控制的DEMO,有需要的可以联系我,公司的项目就不对外展示了(一个后端程序员真的要干前端了哈哈哈). 书接上文,昨天正式的开始了Vue的代码的学习,简单的通过一些假的数据来展示了下个人博客的首页列表,不知道大家是否还记得昨天讲的什么,如果不太清楚呢,可以再回顾下<从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十七 ║Vue基础:使用Vue.js 来画博客首页(一)>,我们主要说到了,Vue的核心语法是什么,MVVM

Vue 基础篇

Vue 基础篇 一.框架与库的区别 JQ库->DOM(DOM操作) + Ajax请求 art-template库->模板引擎 框架 -> 全方位.功能齐全 简易的DOM体验 + 发请求 + 模板引擎 + 路由功能 + ... 代码上的不同: 一般使用库:调用某个函数,自己可以把控库的代码 一般使用框架:其框架在帮我们运行已编写好的代码 框架:初始化自身的一些行为 执行你所编写的代码 施放一些资源 库:小而精 框架:大而全 ( 框架包含了各种库 ) 二.起步 引包 直接用 <scri

监听器listener&amp;过滤器filter

Servlet技术规范 描述三种技术 : Servlet(服务器小程序) .Filter(过滤器) .Listener(监听器) Filter运行在服务器端,对服务器端web资源的访问 进行拦截,起到过滤的作用 Servlet API中 定义接口 Filter,用户只需要编写程序实现Filter接口,完成过滤器编写 Filter快速入门1.编写类 实现 Filter接口2.在服务器端注册 Filter (配置拦截哪个web资源) ----- web.xml   <!-- 注册过滤器 --> 

Vue自定义过滤器

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

【甘道夫】HBase(0.96以上版本)过滤器Filter详解及实例代码

说明: 本文参考官方Ref Guide,Developer API和众多博客,并结合实测代码编写,详细总结HBase的Filter功能,并附上每类Filter的相应代码实现. 本文尽量遵从Ref Guide中"9.4. Client Request Filters"的行文顺序,便于读者对比查看,但内容比官方文档更加详实. 欢迎转载,请注明来源: http://blog.csdn.net/u010967382/article/details/37653177 目录: 引言 -- 参数基础

【Filter】利用过滤器Filter解决post传递的编码问题与利用EL表达式简化参数传递

post传递的编码问题,解决的方式有两种,一种是修改Tomcat的配置文件,这种方式是我反对的,因为你并不能保证自己的工程在任意一个Tomcat都能跑,当然如果以后出现什么情况,处理修改Tomcat配置文件,没有别的的话,那么才修改也不迟,另一种是在页面取值之前使用: request.setCharacterEncoding("utf-8"); 本来这样没什么的,不就一行代码吗?但是在现在JSP编程不停强调页面绝对不能出现后端代码的趋势下,不能使用<[Jsp]使用Post与Get

springCloud学习05之api网关服务zuul过滤器filter

前面学习了zuul的反向代理.负载均衡.fallback回退.这张学习写过滤器filter,做java web开发的对filter都不陌生,那就是客户端(如浏览器)发起请求的时候,都先经过过滤器filter做一些相关的校验或业务判断(如登录.权限等),zuul也同样提供了过滤器功能.只要继承ZuulFilter类即可. 通过前文的介绍,我们对于Zuul的第一印象通常是这样的:它包含了对请求的路由和过滤两个功能,其中路由功能负责将外部请求转发到具体的微服务实例上,是实现外部访问统一入口的基础:而过