vue -- 过滤器

Posted 2020-09-30 小太阳wy927

1、vue 提供的过滤器

 debounce  配合事件，延迟执行 

<div id="box">
    <input type="text" @keyup="show | debounce 200">
</div>

<script>
    new Vue({
        el:"#box",
        data:{  
        },
        methods:{
            show:function (){
                alert(1);
            }
        }
        
    })
</script>

（ 每隔0.2秒触发一次事件）

 

2、数据配合使用过滤器

 limitBy : 取几个   从哪开始 

<div id="box">
　　<li v-for="item in arr | limitBy 1 arr.length-1">
　　　　{{item}}
　　</li>
</div>

<script>
	new Vue({
	　　el:"#box",
	　　data:{ 
		arr:[1,2,3,4,5]
	　　},
	　　methods:{}		
	})
</script>

　 

filterBy :过滤数据

<div id="box">
　　<input type="text" v-model="msg" />
　　<li v-for="item in arr | filterBy msg">
　　　　{{item}}
　　</li>
</div>

<script>
　　new Vue({
　　　　el:"#box",
　　　　data:{ 
	　　arr:[\'width\',\'height\',\'background\',\'orange\'],
　　　　　　　msg:""
	},
	methods:{}		
	})
</script>

　

orderBy :排序

orderBy 1 是正序

            -1 是倒序

　　　随便一个名字就按名字的顺序

<div id="box">
    <li v-for="item in arr | order 1">
        {{item}}
    </li>
</div>

<script>
    new Vue({
        el:"#box",
        data:{ 
            arr:[\'width\',\'height\',\'background\',\'orange\'],
        },
        methods:{            
        }        
    })
</script>

 

3、自定义过滤器

Vue.filter(name,function(参数){

})

<div id="box">
　　{{a| toDou}}
</div>


<script>
	Vue.filter(\'toDou\',function(input){
		return input<10?\'0\'+input:\'\'+input;
	});

	new Vue({
		el:"#box",
		data:{ 
			a:"9"
		},
		methods:{
			
		}
		
	})
</script>