zoukankan      html  css  js  c++  java
  • Vue filter

    1、局部filter

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
        <div id="app">
            <p>{{msg}}</p>
            <App />
        </div>
        <script src="./js/vue.js"></script>
        <script>
            let App = {
                data(){
                    return {
                        text: "Hello World"
                    }
                },
                template:`
                    <div>
                        <p>{{text | reverfilter}}<p>
                        </div>
                `,
                filters:{
                    reverfilter: function(str){
                        str = str.split('').reverse().join('');
                        return str   
                    }
                },
            }
            new Vue({
                el: "#app",
                data(){
                    return {
                        msg: "filter"
                    }
                },
                components:{
                    App
                }
            })
        </script>
    </body>
    </html>

    全局筛选器

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
        <div id="app">
            <p>{{msg}}</p>
            <App />
        </div>
        <script src="./js/vue.js"></script>
        <script>
            // 全局筛选器
            Vue.filter("myFilter", function(val){
                return val.split('').reverse().join('');
            })
            let App = {
                data(){
                    return {
                        text: "Hello World"
                    }
                },
                
                template:`
                    <div>
                        <p>{{text | myFilter}}<p>
                        </div>
                `,
            }
            new Vue({
                el: "#app",
                data(){
                    return {
                        msg: "filter"
                    }
                },
                components:{
                    App
                }
            })
        </script>
    </body>
    </html>
  • 相关阅读:
    B-Suffix Array
    1 or 2
    Boundary
    Fake Maxpooling
    Cover the Tree
    Omkar and Circle
    20.5.31
    Yet Another Yet Another Task
    Codeforces Round #373 (Div. 2)E. Sasha and Array +线段树+矩阵快速幂
    2018 Multi-University Training Contest 2(Naive Operations ) hdu6315
  • 原文地址:https://www.cnblogs.com/wt7018/p/11505600.html
Copyright © 2011-2022 走看看