Vue 过滤器


<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>

<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">
    
    <input type="text" @keyup="show | debounce 2000">
div>
body>
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>
        
        <li v-for="val in arr | limitBy 2">{{val}}li>
        <hr>
        
        <li v-for="val in arr | limitBy 1 2">{{val}}li>
        <hr>
        
        <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>

<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>
        
        <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>

<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>

<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>

你可能感兴趣的:(Vue)