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>
时间: 2024-10-09 20:58:43

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

Vue教程:过滤器filters(五)

Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化.过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持).过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符号指示: <!-- 在双花括号中 --> {{ message | capitalize }} <!-- 在 `v-bind` 中 --> <div v-bind:id="rawId | formatId"></div

vue教程3-05 vue组件数据传递、父子组件数据获取

vue教程3-05 vue组件数据传递 一.vue默认情况下,子组件也没法访问父组件数据 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="bower_components/vue/dist/vue.js"><

vue教程2-08 自定义键盘信息、监听数据变化vm.$watch

vue教程2-08 自定义键盘信息 @keydown.up @keydown.enter @keydown.a/b/c.... 自定义键盘信息: Vue.directive('on').keyCodes.ctrl=17; Vue.directive('on').keyCodes.myenter=13; @keydown.a/b/c.... <input type="text" @keydown.c="show"> 自定义键盘信息: Vue.directi

vue教程1-04 事件 v-on:click=&quot;函数&quot;

vue教程1-04 事件 v-on:click="函数"   v-on:click/mouseout/mouseover/dblclick/mousedown..... 实例:为data添加数据 实例,点击按钮,div显示/隐藏切换 实例,vue实现简易留言本 事件: v-on:click="函数" v-on:click/mouseout/mouseover/dblclick/mousedown..... new Vue({ el:'#box', data:{ //

Vue自带的过滤器

一 过滤器写法 {{ message | Filter}} 二 Vue自带的过滤器:capitalize 功能:首字母大写 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Vue自带的过滤器</title> <meta name="viewport" content="width=device-width,i

vue教程推荐

vue 2.x系列在线交互式教程: vue教程 vue教程全面系统地讲解最新的前端框架Vue.js 2.x,内容涵盖响应式计算机制.指令和组件.动画效果等诸多方面,教程深入浅出,即适合没有Vue.js开发基础的前端初学者学习,也适合具备一定基础的工程师深入学习提高. vuex教程 vuex教程全面系统地讲解最新的前端框架Vuex 2.x,内容涵盖state/mutation等核心概念.状态管理的工作原理.Vuex实践应用等诸多方面,教程深入浅出,即适合没有使用过状态管理库的前端开发人员学习,也适

【全网最全的博客美化系列教程】06.推荐和反对炫酷样式的实现

全网最全的博客美化系列教程相关文章目录 [全网最全的博客美化系列教程]01.添加Github项目链接 [全网最全的博客美化系列教程]02.添加QQ交谈链接 [全网最全的博客美化系列教程]03.给博客添加一只萌萌哒的小仓鼠 [全网最全的博客美化系列教程]04.访客量统计的实现 [全网最全的博客美化系列教程]05.公告栏个性时间显示的实现 [全网最全的博客美化系列教程]06.推荐和反对炫酷样式的实现 [全网最全的博客美化系列教程]07.添加一个分享的按钮吧 [全网最全的博客美化系列教程]08.自定义

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

vue过滤器: 概念:vue.js允许你自定义过滤器可被用作一些常见文本的格式化.过滤器可以用在两个地方:插值表达式   v-bind表达式  由管道符指示 //过滤器调用时候的格式 {{ name | 处理的函数名 }} //可以通过Vue.filter来自定义过滤器 data就是管道符" | " 前面的内容,也就是name Vue.filter('过滤器名称',function(data){ return data+'hahahaha' }) //该过滤器就是为插值表达式的name

Vue.js学习 Item14 – 过滤器与自定义过滤器

基础 类似于自定义指令,可以用全局方法 Vue.filter() 注册一个自定义过滤器,它接收两个参数:过滤器 ID 和过滤器函数.过滤器函数以值为参数,返回转换后的值: Vue.filter('reverse', function (value) { return value.split('').reverse().join('') }) <!-- 'abc' => 'cba' --> <span v-text="message | reverse">&