zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    关于Mysql几周的整理文档
    压力开关
    【团队】汇总
    2017级面向对象程序设计——团队作业1
    东风吹十里,风华一笔得。
    【团队】实验品
    【2017级面向对象程序设计】作业四
    【C#】C#学习笔记_1
    【2017级面向对象程序设计】作业三
    【2017级面向对象程序设计】作业二
  • 原文地址:https://www.cnblogs.com/yaowen/p/6977084.html
Copyright © 2011-2022 走看看