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>
<body>
<div id="app">
    我输入的:<input type="text" v-model="instring"><br>
    正常输出的:{{instring}} <br>
    反转输出:{{instring|rever}} <br>
    {{instring|revers(‘反转输出:‘)}} <br>
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
    new Vue({
        el: ‘#app‘,
        data() {
            return {
                instring: ‘‘
            }
        },
        // 局部过滤器
        filters: {
            // 默认第一个变量为参数
            rever(val) {
                // 将输入的字符逐个分割进行反转再对得到的字符进行拼接
                return val.split("").reverse().join("")
            },
            revers(val, args) {
                // 将输入的字符逐个分割进行反转再对得到的字符进行拼接
                return args + val.split("").reverse().join("")
            }
        }
    })
</script>
</body>
</html>

二、全局过滤器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    我输入的:<input type="text" v-model="instring"><br>
    正常输出的:{{instring}} <br>
    {{instring|revers(‘反转输出:‘)}}
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
    // 全局过滤器
    // val={{instring}} args={{‘反转输出:‘}}
    Vue.filter(‘revers‘, function (val, args) {
        return args + val.split(‘‘).reverse().join(‘‘)
    })
    new Vue({
        el:‘#app‘,
        data(){
            return {
                instring:‘‘
            }
        }
    })
</script>

</body>
</html>

原文地址:https://blog.51cto.com/12012821/2397649

时间: 2024-10-06 00:53:33

Vue入门三、过滤器filter的相关文章

vue入门(三)----使用vue-cli搭建一个单页富应用

上面两节我们说了vue的一些概念,其实说的知识一点基础,这部分知识我觉得更希望大家到官网进行学习,因为在这里说的太多我觉得也只是对官网的照搬照抄而已.今天我们来学习一下vue-cli的一些基础知识,并且用vue-cli来搭建一个单页富应用.那么我们首先介绍一下什么是vue-cli? 首先要学习vue-cli,我觉得我们需要知道什么是cli吧!首先回到"原始"前端,什么是前端?无非就是html,css,js,虽然定义有些粗略.但是随着前端的不断发展,前端的内容越来越多,也越来越丰富.前端

【转】Asp.Net MVC3 简单入门详解过滤器Filter

原文地址:http://www.cnblogs.com/boruipower/archive/2012/11/18/2775924.html 前言 在开发大项目的时候总会有相关的AOP面向切面编程的组件,而MVC(特指:Asp.Net MVC,以下皆同)项目中不想让MVC开发人员去关心和写类似身份验证,日志,异常,行为截取等这部分重复的代码,那我们可以通过AOP截取实现,而在MVC项目中我们就可以直接使用它提供的Filter的特性帮我们解决,不用自己实现复杂的AOP了. 在Asp.net Mvc

AngularJS过滤器filter入门

在开发中,经常会遇到这样的场景 如用户的性别分为“男”和“女”,在数据库中保存的值为1和0,用户在查看自己的性别时后端返回的值自然是1或0,前端要转换为“男”或“女”再显示出来: 如我要换个羽毛球拍,某猫上羽毛球拍的品牌多达数十种,我想单独查看YONEX这个品牌的羽毛球拍: 买完羽毛球拍我还想买一桶羽毛球,点击按销量排序展示商品: 以上三种场景分别对数据进行了转换/筛选/排序,总而言之就是对数据的格式化,AngularJS的filter就是用来做这个事的. 内置过滤器 AngularJS内置了很

一、变量.二、过滤器(filter).三、标签(tag).四、条件分支tag.五、迭代器tag.六、自定义过滤器与标签.七、全系统过滤器(了解)

一.变量 ''' 1.视图函数可以通过两种方式将变量传递给模板页面 -- render(request, 'test_page.html', {'变量key1': '变量值1', ..., '变量keyn': '变量值n'}) -- render(request, 'test_page.html', locals()) # locals() 就是将视图函数中的所有变量都传递给模板页面 2.模板页面中对变量的使用 def dtl(request): num = 3.14 ss = '大碗宽面' #

Vue入门系列(五)Vue实例详解与生命周期

[入门系列] [本文转自] http://www.cnblogs.com/fly_dragon Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成.编译.挂着.销毁等过程进行js控制. 5.1. Vue实例初始化的选项配置对象详解 前面我们已经用了很多次 new Vue({...})的代码,而且Vue初始化的选项都已经用了data.methods.el.comp

【JavaWeb学习】过滤器Filter

一.简介 Filter也称之为过滤器,它是Servlet技术中最激动人心的技术,WEB开发人员通过Filter技术,对web服务器管理的所有web资源:例如Jsp, Servlet, 静态图片文件或静态 html 文件等进行拦截,从而实现一些特殊的功能.例如实现URL级别的权限访问控制.过滤敏感词汇.压缩响应信息等一些高级功能. Servlet API中提供了一个Filter接口,开发web应用时,如果编写的Java类实现了这个接口,则把这个java类称之为过滤器Filter.通过Filter技

监听器listener&amp;过滤器filter

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

Vue.js 自定义过滤器

过滤器,本质上就是一个函数.其作用在于用户输入数据后,它能够进行处理,并返回一个数据结果. Vue.js 与 AngularJS 中的过滤器语法有些相似,使用管道符(|)进行连接,代码示例如下: {{'abc' | uppercase}}    'abc' => 'ABC' 这里使用了Vue.js 内置的过滤器 uppercase,将字符串中的字母全部转换成大写形式. Vue.js 支持在任何出现表达式的地方添加过滤器,除了上面例子中的 双大括号 表达式之外,还可以在绑定指令的表达式后调用,代码

JSP内置对象的作用域,及过滤器filter

pageContext:只要跳转页面,就不存在. request, 只要在当前页面就存在 session, 只有浏览器关闭,才不存在. application,只有服务器关闭后,才不存在. 如果把变量放到pageContext里,就说明它的作用域是page,它的有效范围只在当前jsp页面里. 从把变量放到pageContext开始,到jsp页面结束,你都可以使用这个变量. 如果把变量放到request里,就说明它的作用域是request,它的有效范围是当前请求周期. 所谓请求周期,就是指从htt