vue13过滤器 debounce延迟、limitBy、filterBy、orderBy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
</style>
<script src="vue.js"></script>
<script>
</script>
</head>
<body>
<div id="box">debounce延迟，配合键盘事件
<input type="text" @keyup="show | debounce 2000">
</div>
<script>
var vm=new Vue({
data:{
},
methods:{
show:function(){
alert(1);
}
}
}).$mount('#box');
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style> </style>
<script src="vue.js"></script>
<script> </script>
</head>
<body>
<div id="box">
<ul> 配合数组使用，2条，1.2
<li v-for="val in arr | limitBy 2">
{{val}}
</li>
</ul>
</div>
<script>
var vm=new Vue({
data:{
arr:[1,2,3,4,5]
},
methods:{
}
}).$mount('#box');
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
</style>
<script src="vue.js"></script>
<script>
</script>
</head>
<body>
<div id="box">
<ul> 取2个从arr.length-2开始，4.5
<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>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style> </style>
<script src="vue.js"></script>
<script> </script>
</head>
<body>
<div id="box">
<ul> 包含字母‘w’的
<li v-for="val in arr | filterBy 'w'">
{{val}}
</li>
</ul>
</div>
<script> var vm=new Vue({
data:{
arr:['width','height','background','orange']
},
methods:{ }
}).$mount('#box'); </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
</style>
<script src="vue.js"></script>
<script>
</script>
</head>
<body>
<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>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style> </style>
<script src="vue.js"></script>
<script> </script>
</head>
<body>
<div id="box">
<input type="text" v-model="a">
<ul>
<li v-for="val in arr | orderBy 'o'">
{{val}}
</li>
</ul>
</div>
<script>
var vm=new Vue({
data:{
arr:['width','height','background','orange'],
a:''
},
methods:{
}
}).$mount('#box');
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
</style>
<script src="vue.js"></script>
<script>
</script>
</head>
<body>
<div id="box">
<input type="text" v-model="a">
<ul>
<li v-for="val in arr | orderBy -1"> <!-- -1逆序，1正序-->
{{val}}
</li>
</ul>
</div>
<script>
var vm=new Vue({
data:{
arr:['width','height','background','orange'],
a:''
},
methods:{
}
}).$mount('#box');
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
</style>
<script src="vue.js"></script>
<script>
</script>
</head>
<body>
<div id="box">
<input type="text" v-model="a">
<ul>
<li v-for="val in arr | orderBy a">
{{val}}
</li>
</ul>
</div>
<script>
var vm=new Vue({
data:{
arr:['width','height','background','orange'],
a:''
},
methods:{
}
}).$mount('#box');
</script>
</body>
</html>
vue13过滤器 debounce延迟、limitBy、filterBy、orderBy的更多相关文章
- vuejs通过filterBy,orderBy实现搜索筛选，降序排序数据实例
直接贴代码了: 先上输入前的样子: <style> #example{margin:100px auto;width:600px;} .show{margin:10px;} #search ...
- Vue 过滤器与计算属性
过滤器 V1.x 版本 过滤器基础 过滤器是一个通过输入数据,能够及时对数据进行处理并返回一个数据结果的简单函数.Vue有很多很便利的过滤器,可以参考官方文档,http://cn.vuejs.org/ ...
- Vue - 过滤器
1.内部过滤器 1):字母操作: ---- 针对字符串 A:capitalize B:uppercase C:lowercase 2):json过ingfy滤器,可将表达式的值转化为Json字符串,本 ...
- Vue自带的过滤器
gitHub地址:https://github.com/lily1010/vue_learn/tree/master/lesson05 一 过滤器写法 {{ message | Filter}} 二 ...
- vue.js之过滤器，自定义指令，自定义键盘信息以及监听数据变化
一.监听数据变化 1.监听数据变化有两种,深度和浅度,形式如下: vm.$watch(name,fnCb); //浅度 vm.$watch(name,fnCb,{deep:true}); //深度监视 ...
- vue1.0 的过滤器
vue1.0 自带的过滤器: 一 .过滤器写法 {{ message | Filter}} 二. Vue自带的过滤器:capitalize 功能:首字母大写 <!DOCTYPE html> ...
- Vue（六）过滤器
1. 简介 用来过滤模型数据,在显示之前进行数据处理和筛选 语法:{{ data | filter1(参数) | filter2(参数)}} 2. 关于内置过滤器 vue1.0中内置许多过滤器,如:c ...
- VueJs 自定义过滤器使用总结
过滤器是一个通过输入数据,能够及时对数据进行处理并返回一个数据结果的简单函数.Vue有很多很便利的过滤器,可以参考官方文档, http://cn.vuejs.org/api/#过滤器 ,过滤器通常会使 ...
- vue.js学习 自定义过滤器使用（1）
在这个教程中,我们将会通过几个例子,了解和学习VueJs的过滤器.我们参考了一些比较完善的过滤器,比如orderBy 和 filterBy.而且我们可以链式调用过滤器,一个接一个过滤.因此,我们可以定 ...
随机推荐
- 学习参考:《Python语言及其应用》中文PDF+英文PDF+代码
学习简单的数据类型,以及基本的数学和文本操作,学习用Python内置的数据结构来处理数据: 掌握Python的代码结构和函数的用法:使用模块和包编写大规模Python程序:深入理解对象.类和其他面向对 ...
- 实战medusa暴力破解
medusa介绍: 暴力破解工具:主要可以破解这些模块功能很强大 medusa 的安装 条件: 准备工作:(下载下面软件) 1 wget http://www.foofus.net/jmk/t ...
- 紫书 习题8-11 UVa 1615 （区间选点问题）
这个点就是贪心策略中的区间选点问题. 把右端点从大到小排序, 左端点从小到大排序. 每次取区间右端点就可以了, 到不能覆盖的时候就ans++, 重新取点 ps:这道题不考虑精度也可以过 要着重复习一下 ...
- 【图灵杯 J】简单的变位词
Description 变位词是指改变某个词的字母顺序后构成的新词.蔡老板最近沉迷研究变位词并给你扔了一道题: 给你一些单词,让你把里面的变位词分组找出来.互为变位词的归为一组,最后输出含有变位词最多 ...
- 收集整理的openstack java封装 api的第三方实现的选择
Apache jclouds 地址:http://jclouds.apache.org/guides/openstack/ 一个开源库,java实现,支持cloudstack,openstack以及各 ...
- Mysql 日期型，索引查询的问题
问题: 表中,有一个日期字段WorkDate(Date YYYY-MM-DD格式),现在我把它建成了索引,在检索条件时,WorkDate='YYYY-MM-DD' 时,用EXPLAIN分析,能看到使用 ...
- df -h 挂死
df -h 卡死的情况,那是因为无法统计挂载的目录的大小 一般是因为还挂载了一些外部的目录,如nfs的目录 可以用mount | column -t 命令查看哪些目录 然后umount这些目录, 一般 ...
- cocos2dx 使用spine制作骨骼动画
刚刚接触骨骼动画,所以写一篇文章记录. 1.首先先画好人物的每一个部件: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fon ...
- C++primer书店程序
#include <iostream> #include <string> #include <cassert> #include <algorithm> ...
- Pleasant sheep and big big wolf
pid=3046">点击打开链接 题目:在一个N * M 的矩阵草原上,分布着羊和狼.每一个格子仅仅能存在0或1仅仅动物.如今要用栅栏将全部的狼和羊分开.问怎么放,栅栏数放的最少,求出 ...