vue教程2-06 过滤器

过滤器:
vue提供过滤器:
capitalize uppercase currency....

<div id="box">

        {{msg|currency ￥}}

    </div>

debounce 配合事件，延迟执行

<div id="box">

        <input type="text" @keyup="show | debounce 2000">

    </div>

数据配合使用过滤器:
limitBy 限制几个
limitBy 参数(取几个)
limitBy 取几个 从哪开始

<div id="box">

        <ul>

            <!--取2个-->

            <li v-for="val in arr | limitBy 2">

                {{val}}

            </li>

            <br/>

            <br/>

            <!--取2个，从第arr.length-2个开始取-->

            <li v-for="val in arr | limitBy 2 arr.length-2">

                {{val}}

            </li>

        </ul>

    </div>

    <script>

        var vm=new Vue({

            data:{

                arr:[1,2,3,4,5]

            },

            methods:{

            }

        }).$mount('#box');

    </script>

filterBy 过滤数据
filterBy ‘谁’

<div id="box">

        <input type="text" v-model="a">

        <ul>

            <li v-for="val in arr | filterBy a">

                {{val}}

            </li>

        </ul>

    </div>

    <script>

        var vm=new Vue({

            data:{

                arr:['width','height','background','orange'],

                a:''

            },

            methods:{

            }

        }).$mount('#box');

    </script>

orderBy 排序
orderBy 谁 1/-1
1 -> 正序
2 -> 倒序

<div id="box">

        <input type="text" v-model="a">

        <ul>

            <li v-for="val in arr | orderBy -1">

                {{val}}

            </li>

        </ul>

    </div>

    <script>

        var vm=new Vue({

            data:{

                arr:['width','height','background','orange'],

                a:''

            },

            methods:{

            }

        }).$mount('#box');

    </script>

自定义过滤器: model ->过滤 -> view
Vue.filter(name,function(input){

});

<div id="box">

        {{a | toDou 1 2}}

    </div>

    <script>

        Vue.filter('toDou',function(input,a,b){

            alert(a+','+b);

            return input<10?'0'+input:''+input;

        });

        var vm=new Vue({

            data:{

                a:9

            },

            methods:{

            }

        }).$mount('#box');

    </script>

时间转化器

<div id="box">

        {{a | date}}

    </div>

    <script>

        Vue.filter('date',function(input){

            var oDate=new Date(input);

            return oDate.getFullYear()+'-'+(oDate.getMonth()+1)+'-'+oDate.getDate()+' '+oDate.getHours()+':'+oDate.getMinutes()+':'+oDate.getSeconds();

        });

        var vm=new Vue({

            data:{

                a:Date.now()//返回1970 年 1 月 1日午夜与当前日期和时间之间的毫秒数。

            },

            methods:{

            }

        }).$mount('#box');

    </script>

过滤html标记

双向过滤器:*
Vue.filter('filterHtml',{
　　read:function(input){ //model-view
　　　　return input.replace(/<[^<+]>/g,'');
　　},
　　write:function(val){ //view -> model
　　　　return val;
　　}
});

数据 -> 视图
model -> view

view -> model

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style>

    </style>

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

    <script>

        //<h2>welcome</h2>

        Vue.filter('filterHtml',{

            read:function(input){ //model-view

                alert(1);

                return input.replace(/<[^<]+>/g,'');

            },

            write:function(val){ //view -> model

                console.log(val);

                return val;

            }

        });

        window.onload=function(){

            var vm=new Vue({

                data:{

                    msg:'<strong>welcome</strong>'

                }

            }).$mount('#box');

        };

    </script>

</head>

<body>

    <div id="box">

        <input type="text" v-model="msg | filterHtml">

        <br>

        {{msg | filterHtml}}

    </div>

</body>

</html>

vue教程2-06 过滤器的更多相关文章

  1. Vue教程：过滤器filters（五）

    Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化.过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持).过滤器应该被添加在 JavaScrip ...

  2. vue教程1-07 模板和过滤器

    vue教程1-07 模板和过滤器 一.模板 {{msg}} 数据更新模板变化 {{*msg}} 数据只绑定一次 {{{msg}}} HTML转意输出 <!DOCTYPE html> < ...

  3. vue.js学习 自定义过滤器使用（1）

    在这个教程中,我们将会通过几个例子,了解和学习VueJs的过滤器.我们参考了一些比较完善的过滤器,比如orderBy 和 filterBy.而且我们可以链式调用过滤器,一个接一个过滤.因此,我们可以定 ...

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

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

  5. Vue自带的过滤器

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

  6. vue教程3-05 vue组件数据传递、父子组件数据获取，slot,router路由

    vue教程3-05 vue组件数据传递 一.vue默认情况下,子组件也没法访问父组件数据 <!DOCTYPE html> <html lang="en"> ...

  7. vue教程3-04 vue.js vue-devtools 调试工具的下载安装和使用

    vue教程3-04 vue.js vue-devtools vue调试工具的安装和使用 一.vue-devtools 下载与安装 1.需要 fan qiang 2.打开谷歌浏览器设置--->扩展 ...

  8. vue教程3-03 vue组件，定义全局、局部组件，配合模板，动态组件

    vue教程3-03 vue组件,定义全局.局部组件,配合模板,动态组件 一.定义一个组件 定义一个组件: 1. 全局组件 var Aaa=Vue.extend({ template:'<h3&g ...

  9. vue教程3-02 vue动画

    vue教程3-02 vue动画 以下代码,已经用包管理器下载好vue,animate <!DOCTYPE html> <html lang="en"> &l ...

随机推荐

  1. p标签在div中垂直居中，并且div高度随着p标签文字内容的变化而变化

    1.div设置flex布局 div{ display: flex; align-items: center; } 2.div不要设置height,设置min-height

  2. 在vue或者react中使用express框架

    在react 或者 vue项目中使用express框架 1.创建vue或者 react 项目 2.在项目中创建server文件夹,创建server.js //require()方法引入express模 ...

  3. Educational Codeforces Round 51 D. Bicolorings（dp）

    https://codeforces.com/contest/1051/problem/D 题意 一个2*n的矩阵,你可以用黑白格子去填充他,求联通块数目等于k的方案数,答案%998244353. 思 ...

  4. Lyft Level 5 Challenge 2018 - Final Round (Open Div. 2) C. The Tower is Going Home（思维+双指针）

    https://codeforces.com/contest/1075/problem/C 题意 一个宽为1e9*1e9的矩阵中的左下角,放置一个车(车可以移动到同一行或同一列),放置一些墙,竖的占据 ...

  5. PYTHON编码处理-str与Unicode的区别

    一篇关于STR和UNICODE的好文章 整理下python编码相关的内容 注意: 以下讨论为Python2.x版本, Py3k的待尝试 开始 用python处理中文时,读取文件或消息,http参数等等 ...

  6. python：OS模块

    r"""OS routines for NT or Posix depending on what system we're on. This exports: - al ...

  7. MySql Cast与Convert函数

    两者具体的语法如下: Cast(value as type): Convert(value ,type): type不是都可以滴,可以转换的type如下: 二进制,同带binary前缀的效果 : BI ...

  8. myeclipse安装maven

    开始开门见山了,至于maven是什么请百度百科. 第一步: 下载maven,进入maven官网下载:http://maven.apache.org/download.cgi 第二步: 1.解压下载好的 ...

  9. Alpha阶段敏捷冲刺（五）

    1.站立式会议 提供当天站立式会议照片一张 2.每个人的工作 (有work item 的ID),并将其记录在码云项目管理中: 昨天已完成的工作. 祁泽文:实现了个人遗忘曲线图 徐璐琳:完成了微信Web ...

  10. 如何更好地使用Java 8的Optional

    Java 8中的Optional<T> 是一个可以包含或不可以包含非空值的容器对象,在 Stream API中很多地方也都使用到了Optional. java中非常讨厌的一点就是nullp ...