1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>智能社——http://www.zhinengshe.com</title>
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  7.     <meta name="apple-mobile-web-app-capable" content="yes">
  8.     <meta name="apple-mobile-web-app-status-bar-style" content="black">
  9.     <style>
  10.     </style>
  11.     <script src="vue.js"></script>
  12.     <script>
  13.     </script>
  14. </head>
  15. <body>
  16.     <div id="box">debounce延迟，配合键盘事件
  17.         <input type="text" @keyup="show | debounce 2000">
  18.     </div>
  19.     <script>
  20.         var vm=new Vue({
  21.             data:{
  22.             },
  23.             methods:{
  24.                 show:function(){
  25.                     alert(1);
  26.                 }
  27.             }
  28.         }).$mount('#box');
  29.     </script>
  30. </body>
  31. </html>
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>智能社——http://www.zhinengshe.com</title>
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  7.     <meta name="apple-mobile-web-app-capable" content="yes">
  8.     <meta name="apple-mobile-web-app-status-bar-style" content="black">
  9.     <style>
  10.  
  11.     </style>
  12.     <script src="vue.js"></script>
  13.     <script>
  14.  
  15.     </script>
  16. </head>
  17. <body>
  18.     <div id="box">
  19.         <ul>  配合数组使用，2条，1.2
  20.             <li v-for="val in arr | limitBy 2">
  21.                 {{val}}
  22.             </li>
  23.         </ul>
  24.     </div>
  25.     <script>
  26.         var vm=new Vue({
  27.             data:{
  28.                 arr:[1,2,3,4,5]
  29.             },
  30.             methods:{
  31.             }
  32.         }).$mount('#box');
  33.     </script>
  34. </body>
  35. </html>
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>智能社——http://www.zhinengshe.com</title>
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  7.     <meta name="apple-mobile-web-app-capable" content="yes">
  8.     <meta name="apple-mobile-web-app-status-bar-style" content="black">
  9.     <style>
  10.     </style>
  11.     <script src="vue.js"></script>
  12.     <script>
  13.     </script>
  14. </head>
  15. <body>
  16.     <div id="box">
  17.         <ul>  取2个从arr.length-2开始，4.5
  18.             <li v-for="val in arr | limitBy 2 arr.length-2">
  19.                 {{val}}
  20.             </li>
  21.         </ul>
  22.     </div>
  23.     <script>
  24.         var vm=new Vue({
  25.             data:{
  26.                 arr:[1,2,3,4,5]
  27.             },
  28.             methods:{
  29.  
  30.             }
  31.         }).$mount('#box');
  32.     </script>
  33. </body>
  34. </html>
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>智能社——http://www.zhinengshe.com</title>
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  7.     <meta name="apple-mobile-web-app-capable" content="yes">
  8.     <meta name="apple-mobile-web-app-status-bar-style" content="black">
  9.     <style>
  10.  
  11.     </style>
  12.     <script src="vue.js"></script>
  13.     <script>
  14.  
  15.     </script>
  16. </head>
  17. <body>
  18.     <div id="box">
  19.         <ul>  包含字母‘w’的
  20.             <li v-for="val in arr | filterBy 'w'">
  21.                 {{val}}
  22.             </li>
  23.         </ul>
  24.     </div>
  25.     <script>
  26.  
  27.         var vm=new Vue({
  28.             data:{
  29.                 arr:['width','height','background','orange']
  30.             },
  31.             methods:{
  32.  
  33.             }
  34.         }).$mount('#box');
  35.  
  36.     </script>
  37. </body>
  38. </html>
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>智能社——http://www.zhinengshe.com</title>
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  7.     <meta name="apple-mobile-web-app-capable" content="yes">
  8.     <meta name="apple-mobile-web-app-status-bar-style" content="black">
  9.     <style>
  10.     </style>
  11.     <script src="vue.js"></script>
  12.     <script>
  13.     </script>
  14. </head>
  15. <body>
  16.     <div id="box">
  17.         <input type="text" v-model="a">
  18.         <ul>
  19.             <li v-for="val in arr | filterBy a">
  20.                 {{val}}
  21.             </li>
  22.         </ul>
  23.     </div>
  24.     <script>
  25.         var vm=new Vue({
  26.             data:{
  27.                 arr:['width','height','background','orange'],
  28.                 a:''
  29.             },
  30.             methods:{
  31.             }
  32.         }).$mount('#box');
  33.     </script>
  34. </body>
  35. </html>
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>智能社——http://www.zhinengshe.com</title>
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  7.     <meta name="apple-mobile-web-app-capable" content="yes">
  8.     <meta name="apple-mobile-web-app-status-bar-style" content="black">
  9.     <style>
  10.  
  11.     </style>
  12.     <script src="vue.js"></script>
  13.     <script>
  14.  
  15.     </script>
  16. </head>
  17. <body>
  18.     <div id="box">
  19.         <input type="text" v-model="a">
  20.         <ul>
  21.             <li v-for="val in arr | orderBy 'o'">
  22.                 {{val}}
  23.             </li>
  24.         </ul>
  25.     </div>
  26.     <script>
  27.         var vm=new Vue({
  28.             data:{
  29.                 arr:['width','height','background','orange'],
  30.                 a:''
  31.             },
  32.             methods:{
  33.             }
  34.         }).$mount('#box');
  35.     </script>
  36. </body>
  37. </html>
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>智能社——http://www.zhinengshe.com</title>
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  7.     <meta name="apple-mobile-web-app-capable" content="yes">
  8.     <meta name="apple-mobile-web-app-status-bar-style" content="black">
  9.     <style>
  10.     </style>
  11.     <script src="vue.js"></script>
  12.     <script>
  13.     </script>
  14. </head>
  15. <body>
  16.     <div id="box">
  17.         <input type="text" v-model="a">
  18.         <ul>
  19.             <li v-for="val in arr | orderBy -1"> <!--  -1逆序，1正序-->
  20.                 {{val}}
  21.             </li>
  22.         </ul>
  23.     </div>
  24.     <script>
  25.         var vm=new Vue({
  26.             data:{
  27.                 arr:['width','height','background','orange'],
  28.                 a:''
  29.             },
  30.             methods:{
  31.             }
  32.         }).$mount('#box');
  33.     </script>
  34. </body>
  35. </html>
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>智能社——http://www.zhinengshe.com</title>
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  7.     <meta name="apple-mobile-web-app-capable" content="yes">
  8.     <meta name="apple-mobile-web-app-status-bar-style" content="black">
  9.     <style>
  10.     </style>
  11.     <script src="vue.js"></script>
  12.     <script>
  13.     </script>
  14. </head>
  15. <body>
  16.     <div id="box">
  17.         <input type="text" v-model="a">
  18.         <ul>
  19.             <li v-for="val in arr | orderBy a">
  20.                 {{val}}
  21.             </li>
  22.         </ul>
  23.     </div>
  24.     <script>
  25.         var vm=new Vue({
  26.             data:{
  27.                 arr:['width','height','background','orange'],
  28.                 a:''
  29.             },
  30.             methods:{
  31.             }
  32.         }).$mount('#box');
  33.     </script>
  34. </body>
  35. </html>

vue13过滤器 debounce延迟、limitBy、filterBy、orderBy的更多相关文章

  1. vuejs通过filterBy,orderBy实现搜索筛选，降序排序数据实例

    直接贴代码了: 先上输入前的样子: <style> #example{margin:100px auto;width:600px;} .show{margin:10px;} #search ...

  2. Vue 过滤器与计算属性

    过滤器 V1.x 版本 过滤器基础 过滤器是一个通过输入数据,能够及时对数据进行处理并返回一个数据结果的简单函数.Vue有很多很便利的过滤器,可以参考官方文档,http://cn.vuejs.org/ ...

  3. Vue - 过滤器

    1.内部过滤器 1):字母操作: ---- 针对字符串 A:capitalize B:uppercase C:lowercase 2):json过ingfy滤器,可将表达式的值转化为Json字符串,本 ...

  4. Vue自带的过滤器

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

  5. vue.js之过滤器，自定义指令，自定义键盘信息以及监听数据变化

    一.监听数据变化 1.监听数据变化有两种,深度和浅度,形式如下: vm.$watch(name,fnCb); //浅度 vm.$watch(name,fnCb,{deep:true}); //深度监视 ...

  6. vue1.0 的过滤器

    vue1.0  自带的过滤器: 一 .过滤器写法 {{ message | Filter}} 二. Vue自带的过滤器:capitalize 功能:首字母大写 <!DOCTYPE html> ...

  7. Vue（六）过滤器

    1. 简介 用来过滤模型数据,在显示之前进行数据处理和筛选 语法:{{ data | filter1(参数) | filter2(参数)}} 2. 关于内置过滤器 vue1.0中内置许多过滤器,如:c ...

  8. VueJs 自定义过滤器使用总结

    过滤器是一个通过输入数据,能够及时对数据进行处理并返回一个数据结果的简单函数.Vue有很多很便利的过滤器,可以参考官方文档, http://cn.vuejs.org/api/#过滤器 ,过滤器通常会使 ...

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

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

随机推荐

  1. tinymce原装插件源码分析（五）-searchreplace

    searchreplace 功能:查找和替换 代码注释见: https://www.xunhanliu.top/static/js/tinymce/plugins/searchreplace/plug ...

  2. 学习参考《父与子的编程之旅python【第二版】》高清中文版PDF+高清英文版PDF+源代码

    对于初步接触编程语言的朋友,推荐看一看<父与子的编程之旅第2版>,对于完全编程零基础的很友好! 图文并茂,过多的文字堆垒很容易让人产生厌倦情绪,也更容易让人产生放弃的想法.使用了大量插图, ...

  3. 《Effective Modern C++》翻译--条款4:了解怎样查看推导出的类型

    条款4:了解怎样查看推导出的类型 那些想要了解编译器怎样推导出的类型的人通常分为两个阵营. 第一种阵营是实用主义者.他们的动力通常来自于编敲代码过程中(比如他们还在调试解决中),他们利用编译器进行寻找 ...

  4. m_Orchestrate learning system---二十五、复制类的时候最容易出现的错误是什么

    m_Orchestrate learning system---二十五.复制类的时候最容易出现的错误是什么 一.总结 一句话总结:命名空间错误导致Analyze类虽然继承了Base类,但是没有执行里面 ...

  5. FZOJ--2212--Super Mobile Charger（水题）

    Problem 2212 Super Mobile Charger Accept: 3    Submit: 11 Time Limit: 1000 mSec    Memory Limit : 32 ...

  6. 关于安装Ubuntu系统时提示“分配到/的分区/dev/sdax开始于xxxx字节,使用磁盘的最小对齐,这可能造成非常差的性能..."的解决办法

    由于Windows系统的VMware出了一些问题,索性就不用VM了,直接装上双系统好了.但是在最后安装时出现错误提示“分配到/的分区/dev/sdc1开始于3584字节,使用磁盘的最小对齐,这可能造成 ...

  7. 安卓开发--HttpDemo01

    package com.cnn.httpdemo01; import android.app.Activity; import android.content.Intent; import andro ...

  8. POJ 1141 括号匹配 DP

    黑书原题 区间DP,递归输出 不看Discuss毁一生 (woc还真有空串的情况啊) //By SiriusRen #include <cstdio> #include <cstri ...

  9. [转]60fps on the mobile web

    Flipboard launched during the dawn of the smartphone and tablet as a mobile-first experience, allowi ...

  10. 我的Spring MVC第一个应用

    Product package com.mstf.bean; import java.io.Serializable; /** * Product类,封装了一些信息,包含三个属性 * @author ...