Vue 过滤器

来源：互联网发布：手机淘宝如何找旗舰店编辑：程序博客网时间：2024/05/20 05:06

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <script src="../js/vue1.0.js"></script>    <script>        window.onload = function(){            var vm = new Vue({                el:'#box',                data:{}            });        }    </script></head><body><div id="box">    <!--大小写转换-->    {{'welcome'|uppercase}}    <hr>    {{'WELCOME'|lowercase}}    <hr>    <!--首字母大写-->    {{'welcome'|capitalize}}    <hr>    {{'WELCOME'|lowercase |capitalize}}    <hr>    <!--转换成美元-->    {{12|currency}}    <hr>    <!--转换成人民币-->    {{12|currency '￥'}}</div></body></html>

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>实例方法</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">    <script src="../js/vue1.0.js"></script>    <script src="../js/vue-resource.js"></script>    <script>        window.onload = function(){            var vm = new Vue({                data:{},                methods:{                    show:function(){                        alert(111)                    }                }            }).$mount('#box');        }    </script></head><body><div id="box">    <!--debounce配合事件使用，延迟执行-->    <input type="text" @keyup="show | debounce 2000"></div></body></html>

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>实例方法</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">    <script src="../js/vue1.0.js"></script>    <script src="../js/vue-resource.js"></script>    <script>        window.onload = function(){            var vm = new Vue({                data:{                    arr:[1,2,3,4,5,6],                    arr2:["width","height","background","orange"],                    arr3:["width","height","background","orange"],                    b:''                },                methods:{                }            }).$mount('#box');        }    </script></head><body><div id="box">    <ul>        <!--val in arr | limitBy 2  从数组中取出前两位-->        <li v-for="val in arr | limitBy 2">{{val}}</li>        <hr>        <!--val in arr | limitBy 1 2 从数组第二位开始取一位-->        <li v-for="val in arr | limitBy 1 2">{{val}}</li>        <hr>        <!--val in arr2 | filterBy 'a' 取出数组中含有'a'的值-->        <li v-for="val in arr2 | filterBy 'a'">{{val}}</li>    </ul>    <hr>    <input type="text" v-model="b">    <ul>        <li v-for="val in arr3 | filterBy b">{{val}}</li>    </ul></div></body></html>

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>实例方法</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">    <script src="../js/vue1.0.js"></script>    <script src="../js/vue-resource.js"></script>    <script>        window.onload = function(){            var vm = new Vue({                data:{                    arr:["width","height","background","orange"],                    a:''                },                methods:{                }            }).$mount('#box');        }    </script></head><body><div id="box">    <ul>        <!--val in arr | orderBy 1  1正序   -1倒序-->        <li v-for="val in arr | orderBy 1">{{val}}</li>        <hr>    </ul>    <hr>    <ul>        <li v-for="val in arr | orderBy -1">{{val}}</li>        <hr>    </ul>    <hr>    <input type="text" v-model="a">    <ul>        <li v-for="val in arr | orderBy a">{{val}}</li>        <hr>    </ul></div></body></html>

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>实例方法</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">    <script src="../js/vue1.0.js"></script>    <script src="../js/vue-resource.js"></script>    <script>        //自定义过滤器        Vue.filter('toDob',function(num){            return num<10?'0'+num:num;        });        window.onload = function(){            var vm = new Vue({                data:{                    a:'9'                },                methods:{                }            }).$mount('#box');        }    </script></head><body><div id="box">    {{a | toDob}}</div></body></html>

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>实例方法</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">    <script src="../js/vue1.0.js"></script>    <script src="../js/vue-resource.js"></script>    <script>        //自定义过滤器        Vue.filter('change_time',function(num) {            var oDate = new Date(num);            return oDate.getFullYear() + '-' + oDate.getMonth() + '-' + oDate.getDate() + ' ' + oDate.getHours() + ':' + oDate.getMinutes() + ':' + oDate.getSeconds();        });        window.onload = function(){            var vm = new Vue({                data:{                    a:Date.now()                },                methods:{                }            }).$mount('#box');        }    </script></head><body><div id="box">    {{a | change_time}}</div></body></html>

0 0