1.过滤器的定义和使用

实现：将页面的中的单纯替换成，用户传来的文字。

全局过滤器：所有的Vue对象都可以使用

<body>

        <div id="app">
　　　　　　　　//可以使用多个过滤器  第一个过滤器将返回的结果作为参数传递给第二个过滤器

            <p>{{msg| msgFilter('疯狂')| test}}</p>

        </div>

        <script>

            //定义一个msgFilter过滤器

            Vue.filter('msgFilter',function(msg,arg){

                return msg.replace(/单纯/g,arg)

            });

            Vue.filter('test',function(msg){

                return msg+'============'

            });

            var vm = new Vue({

                el: '#app',

                data: {

                    msg: '曾经，我是一个单纯的人，如今我已不再单纯',

                },

                methods: {}

            })

        </script>

    </body>

2.私用的过滤器

只用创建的Vue对象才可以使用

如果私有和公用的过滤器名字相同则依据就近原则使用

实现：通过一个私有的过滤器，实现时间的格式化

<td>{{item.ctime | dateFormat}}</td>
methods: {

                filters: {

                    //如果私有的过滤器和全局过滤器的名称一致 那么默认去找私有的过滤器

                    dateFormat: function(datestr) {

                        //格式化时间yyyy-MM-dd

                        var date = new Date()

                        var y = date.getFullYear()

                        //格式化数字 不足两位补充'0'

                        var m = (date.getMonth() + 1).toString().padStart(2, '0')

                        var d = date.getDate().toString().padStart(2, '0')

                        return `${y}-${m}-${d}`

                    }

                },

vue.js_05_vue.js的过滤器的更多相关文章

  1. Vue自带的过滤器

    gitHub地址:https://github.com/lily1010/vue_learn/tree/master/lesson05 一 过滤器写法 {{ message | Filter}} 二 ...

  2. Vue node.js商城-购物车模块

      一.渲染购物车列表页面 新建src/views/Cart.vue获取cartList购物车列表数据就可以在页面中渲染出该用户的购物车列表数据 data(){   return {      car ...

  3. vue 中全局filter过滤器的配置及使用

    在项目中使用到的经常用到过滤器,比如时间,数据截取等过滤器,如果在每个.vue中都可以复制同一个过滤器,这可以达到目的,但是遇到方法有bug时就需要诸葛修改进入不同的页面修改,这样既费时又费力,优先可 ...

  4. vue中filters（过滤器）的使用

    在vue中使用filters Vue.js自定义过滤器,可被用于一些常见的文本格式化.过滤器可以用在两个地方:双花括号插值和 v-bind 表达式.过滤器应该被添加在 JavaScript 表达式的尾 ...

  5. day 83 Vue学习四之过滤器、钩子函数、路由、全家桶等

    Vue学习四之过滤器.钩子函数.路由.全家桶等   本节目录 一 vue过滤器 二 生命周期的钩子函数 三 vue的全家桶 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 Vue的过滤 ...

  6. Vue框架:挂载点-过滤器-事件指令-表单指令

    近期学习安排 1.Vue框架 前台html+css+js框架,是不同于js与JQuery的数据驱动框架, 学习的知识点:指令 |  实例成员 | vue项目 2.drf框架 django的插件,完成前 ...

  7. vue学习(十五) 过滤器简单实用

    vue过滤器: 概念:vue.js允许你自定义过滤器可被用作一些常见文本的格式化.过滤器可以用在两个地方:插值表达式   v-bind表达式  由管道符指示 //过滤器调用时候的格式 {{ name ...

  8. vue.common.js?e881:433 TypeError: Cannot read property 'nodeName' of undefined

    我觉得吧,是这么个原因,就是响应式要找这个node改它的内容,没找着,就报错了. 用computed监控vuex的state属性,绑定到页面上,如果这个属性改了,因为响应式,那么就要更改页面,如果页面 ...

  9. vue+node.js+webpack开发微信公众号功能填坑——v -for循环

    页面整体框架实现,实现小功能,循环出数据,整体代码是上一篇 vue+node.js+webpack开发微信公众号功能填坑--组件按需引入 修改部门代码 app.vue <yd-flexbox&g ...

随机推荐

  1. 微信公众号开发API接口大全

    在本文中,我们列出微信公众平台上可以使用的API接口以及举例如何在微信公众平台调用这些接口实现相应的功能. 接口调用说明: ① Appkey请使用的微信公众号,不要使用默认的trailuser ② 接 ...

  2. luoguP1062 数列 [数学]

    题目描述 给定一个正整数k(3≤k≤15),把所有k的方幂及所有有限个互不相等的k的方幂之和构成一个递增的序列,例如,当k=3时,这个序列是: 1,3,4,9,10,12,13,… (该序列实际上就是 ...

  3. 0918CSP-S模拟测试赛后总结

    14名.110分.可以算是几次大落之后的一次小小的崛起?? 然而sdfz的开挂选手AK了啊…… T2重测前rank7我就高兴地像个傻子??也不看看这次T1是个什么题. 实力还是不行.一眼秒掉了简单题, ...

  4. yolo+keras+tensorflow出错：No module named 'leaky_relu'+

    结论:keras2.1.5+tensorflow1.6.0即可. 首先出现的是:No module named 'leaky_relu',此时把keras改成2.1.5照样出错,改成keras2.1. ...

  5. CSS 常用的兼容性调试技巧

    1.实现所有浏览器主页居中 Firefox下主页居中代码:.box{margin:0px auto} IE5.5下主页居中代码:body{text-align:center;} 将以上两种代码,合在一 ...

  6. WPF实现Drag/Drop操作

    原文:WPF实现Drag/Drop操作 有时候我们方便用户操作,总会把一下Copy/Paste 或者 input操作转换为Drag/Drop, WPF 跟之前WinForm 一样提供了一些实现方式方便 ...

  7. wpf Rectangle

    <Rectagle Width="100" Height="100" Stroke="Black" Fill="Blue&q ...

  8. 历经小半宿吧。哎，终于搭建好了Linux-C的环境

    小小地庆祝一下吧   继续努力学习,把Linux-C熟悉一下,争取做到会用吧...   我想应该不难   我熟悉的 iostream 还存在   可惜,微软基础类库不在了...

  9. Linux+QT4+我忙活半宿的结果

    一个简单的计算器,虽然很弱智,而且还不完善,但是通过它,我大致了解了一下QT的用法   QT真的很高级,已经近乎纯面向对象的了.   QString可以自己转化成多种类型,就这一点,就已经和C#差不多 ...

  10. 基于Swagger+SpringBoot快速构建javaweb项目

    章节导航 SpringBoot&Swagger简介 数据模型和接口定义 项目框架生成 业务逻辑实现 项目源码地址 github项目路径:https://github.com/Vikezhu/s ...