vue13过滤器 debounce延迟、limitBy、filterBy、orderBy
2024-06-09 09:03:17
<!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相关推荐
- vue.js基础之 过滤器详解
过滤器 介绍 过滤器本质上就是函数,作用在于用户输入数据后进行处理并返回一个结果.使用管道符(|)连接. 分类 内置过滤器 实例: {{'abc' | uppercase}} //'abc' => ...
- vuejs深入浅出—基础篇
一.从HelloWorld说起 任何语言的都是从Hello World开始的,VueJs也不例外,直接上代码: <script src="https://unpkg.com/vue/d ...
- avalon2学习教程11数据联动
在许多表单应用,我们经常遇到点击一个复选框(或下拉框)会引发旁边的复选框(或下拉框)发生改变,这种联动效果用avalon来做是非常简单的.因为avalon拥有经典MVVM框架的一大利器,双向绑定!绝大 ...
- avalon2学习教程11数据联动 1
在许多表单应用,我们经常遇到点击一个复选框(或下拉框)会引发旁边的复选框(或下拉框)发生改变,这种联动效果用avalon来做是非常简单的.因为avalon拥有经典MVVM框架的一大利器,双向绑定!绝大 ...
- Vue.js 实践（2）：实现多条件筛选、搜索、排序及分页的表格功能
与上周的第一篇实践教程一样,在这篇文章中,我将继续从一种常见的功能--表格入手,展示Vue.js中的一些优雅特性.同时也将对filter功能与computed属性进行对比,说明各自的适用场景,也为vu ...
- Vuejs 写法实例
原文地址:http://www.jianshu.com/p/293387d240b2 Hello World <div id="app">{{ message }}&l ...
- javascript搜索框联想搜索_JavaScript实现搜索联想功能
-.虽然Jquery已经有了一个完整的包 实现前端搜索联想功能,但是出于学习还是想了解一下实现此功能的原理性 回想起来 实现此功能很简单,1.前端输入字符串 文本改变 异步请求服务器 将返回的资料显示 ...
- axios 配置loading_用Axios Element 实现全局的请求 loading
Kapture 2018-06-07 at 14.57.40.gif 背景 业务需求是这样子的,每当发请求到后端时就触发一个全屏的 loading,多个请求合并为一次 loading. 现在项目中用的 ...
- AngularJS 表格
ng-repeat 指令可以完美的显示表格. 在表格中显示数据 <div ng-app="myApp" ng-controller="customersCtrl&q ...
最新文章
- 2021 三月1日雅思口语考试反思
- float、double(浮点数)区别还有和decimal(定点数)的比较
- STM32的2.02固件库提供的启动文件详解 stm32f10x_vector.s
- 中关村修电脑记实：那些年，修电脑犯下的错！
- 当cell中有UItextfiled或者UITextVIew时，弹出键盘把tableview往上,但是有的cell没有移动...
- php操作mysql数据库的扩展有哪些_PHP mysql 扩展库 操作mysql数据库步骤
- python字典浅复制_元组，字典，浅复制，集合
- Cookie, Session, LocalStorage, SessionStorage, Etag, Expire
- 商城系统演示站 -多用户商城系统
- 用大O记号法测量算法的效率（Algorithm efficiency Asymptotic notation Big O notation）
- android JeckPack官方文档学习
- HTTPS数字证书原理
- Android之QQ登录
- Hex Editor Neo Ultimate系统要求
- Twitter与微博
- python爬虫之抓取高清壁纸
- 类似PS的蒙版？可以实现，LVGL『Object mask对象蒙版控件』介绍
- SVG中插入HTML标签
- 遍历hashMap、hashSet、Hashtable
- MPAndroidChart使用(BarChart为例)