<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<body>

    <div id="app"></div>

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

    <script>

        /* 过滤器的使用：为了将数据做一些处理后才渲染出来，

        它可以用在组件的内部为该组件服务，也可以声明为全局的过滤器

        下面来看下组件里面过滤器的用法:首先在组件里定义后过滤器的方法，

        然后在使用时使用：要过滤的value | 过滤器名 即可。

        */

        var App = {

            template: `<div>我是局部组件～

            <p>我是使用过滤器后的时间： {{ time | myTimeFilter}}</p>

            </div>`,

            data(){

                return {

                    time: '2019-06-25'

                }

            },

            // 声明过滤器

            filters: {

                // 过滤器将日期中的-替换为/

                myTimeFilter(value) {

                    return value.replace(/-/g, '/');

                }

            }

        };

        new Vue({

            el: '#app',

            // 使用局部组件

            template: `

                <App />

            `,

            data:function(){

                return {}

            },

            // 挂载局部组件

            components: {

                App

            }

        });

    </script>

</body>

</html>

Vue之过滤器的使用的更多相关文章

  1. Vue自定义过滤器

    gitHub地址: https://github.com/lily1010/vue_learn/tree/master/lesson05 一 自定义过滤器(注册在Vue全局) 注意事项: (1)全局方 ...

  2. vue filter过滤器简单应用

    vue中过滤器,用于一些常见的文本格式化,用 | 来操作. 过滤器可以用在两个地方: 1.在{{}}双花括号中插入值 2.v-bind表达式中使用 <!-- 在双花括号中 --> {{ m ...

  3. vue filters过滤器

    vue filters过滤器 vue.js允许我们自定义过滤器,可被使用于一些常见的文本格式化,过滤器可以用在两个地方,双花括号插值和 v-bind表达式.最常见的就是双花括号插值. 比如如下代码:{ ...

  4. vue的过滤器

    Vue.Js 提供了强大的过滤器API,能够对数据进行各种过滤处理,返回需要的结果 vue的过滤器一般在JavaScript 表达式的尾部,由“|”符号指示: 过滤器可以让我们的代码更加优美,一般可以 ...

  5. vue自定义过滤器的创建和使用

    1.简单介绍   过滤器的作用:实现数据的筛选.过滤.格式化.   过滤器的本质是一个有参数,有返回值的方法.   过滤器可以用在两个地方:双花括号插值和v-bind表达式(后者从2.1.0+开始支持 ...

  6. VUE：过滤器及日期格式化moment库

    VUE:过滤器及日期格式化moment库 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&qu ...

  7. VUE笔记 - 过滤器 Vue.filter 形参默认值 @keyup.f2 自定义按键修饰符

    过滤器函数的传参: 第一个参数 A 是固定的,表示要过滤之前的内容. 第二个参数 B,表示要把原本的内容 A 过滤成 B. 写函数内容时, 这里第二处只写个参数. 实际的值要写到管道符调用函数的括号内 ...

  8. 六、vue基础--过滤器定义

    七.过滤器定义 1.使用:{{username|strip}}.<a :href="url|strip">百度</a> 2.定义:都是定义一个函数,这个函数 ...

  9. vue 时间过滤器

    过滤器:定义:对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理).语法:1.注册过滤器: Vue.filter(name ,callback)或new Vue{filters:{}}2. ...

  10. vue（4）—— vue的过滤器，监听属性，生命周期函数，获取DOM元素

    过滤器 vue允许自定义过滤器,我个人认为,过滤器有两种,一种是对数据的清洗过滤,一种是对数据切换的动画过滤 数据切换的动画过滤 这里还是利用前面的动态组件的例子: 这里由于没办法展示动画效果,代码如 ...

随机推荐

  1. opencord视频截图

    参考:https://www.youtube.com/watch?v=Teu9jK6GF6s

  2. J20170509-hm

    インスペクタ  巡查员 スライス   切片

  3. bzoj 1823: [JSOI2010]满汉全席【2-SAT+tarjan】

    因为每种食材只有一份,所以两个评委的如果有要求同一种食材的两种做法就是不可行,用这个来建立2-SAT模型 然后跑tarjan判可行性即可 #include<iostream> #inclu ...

  4. 洛谷P3825 [NOI2017]游戏（2-SAT）

    传送门 果然图论的题永远建图最麻烦……看着题解代码的建图过程真的很珂怕…… 先不考虑地图$x$,那么每一个地图都只能用两种赛车,于是我们可以用2-SAT来搞,用$i$表示这个地图能用的第一辆车,$i' ...

  5. video.py OpenCv例程阅读

    #!/usr/bin/env python ''' Video capture sample. Sample shows how VideoCapture class can be used to a ...

  6. 害死人不偿命的(3n+1)猜想 (15)

    #include <iostream> #include <algorithm> using namespace std; int main(){ int n; while ( ...

  7. iOS 加载Viewcontroller的几种方法

    // 一.根据StoryboardID(需要在Storyboard设置),通过ViewController所在的Storyboard来加载: UIStoryboard *storyboard = [U ...

  8. Spring Cache无效的问题以及解决办法

    http://blog.csdn.net/kimylrong/article/details/50126979 @Cacheable标注的方法,如果其所在的类实现了某一个接口,那么该方法也必须出现在接 ...

  9. bzoj 4821 [Sdoi2017]相关分析

    题面 https://www.lydsy.com/JudgeOnline/problem.php?id=4821 题解 做法显然 就是维护一颗线段树 里面装4个东西 区间x的和 区间y的和 区间$x^ ...

  10. 解决 Cordova命令突然无法使用问题.

    问题背景 之前一直在做 Cordova 方面, 然后准备自己尝试使用 Vue + WebPack 再配合 Cordova 做一个 App . 更新了 npm , 然后然后, 我的 cordova 这个 ...