zoukankan      html  css  js  c++  java
  • vue过滤器和组件化

    <!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>
        <!-- 过滤器常用来处理文本格式化的操作。过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 -->
        <div id="app">
            <ul>
                <li v-for="user in userList">
                    {{user.id}} ==> {{user.name}} ==> {{user.gender == 1?"男":"女"}} ==>
                    {{user.gender | genderFilter}} ==> {{user.gender | gFilter}}
                </li>
            </ul>
        </div>
        <script src="../node_modules/vue/dist/vue.js"></script>
    
        <script>
    
            Vue.filter("gFilter", function (val) {
                if (val == 1) {
                    return "男~~~";
                } else {
                    return "女~~~";
                }
            })
    
            let vm = new Vue({
                el: "#app",
                data: {
                    userList: [
                        { id: 1, name: 'jacky', gender: 1 },
                        { id: 2, name: 'peter', gender: 0 }
                    ]
                },
                filters: {
                     filters 定义局部过滤器,只可以在当前vue实例中使用
                    genderFilter(val) {
                        if (val == 1) {
                            return "男";
                        } else {
                            return "女";
                        }
                    }
                }
            })
        </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">
            <button v-on:click="count++">我被点击了 {{count}} 次</button>
    
            <counter></counter>
            <counter></counter>
            <counter></counter>
            <counter></counter>
            <counter></counter>
    
            <button-counter></button-counter>
        </div>
        <script src="../node_modules/vue/dist/vue.js"></script>
    
    
        <script>
            //1、全局声明注册一个组件
            Vue.component("counter", {
                template: `<button v-on:click="count++">我被点击了 {{count}} 次</button>`,
                data() {
                    return {
                        count: 1
                    }
                }
            });
    
            //2、局部声明一个组件
            const buttonCounter = {
                template: `<button v-on:click="count++">我被点击了 {{count}} 次~~~</button>`,
                data() {
                    return {
                        count: 1
                    }
                }
            };
    
            new Vue({
                el: "#app",
                data: {
                    count: 1
                },
                components: {
                    'button-counter': buttonCounter
                }
            })
        </script>
    </body>
    
    </html>
    

      

  • 相关阅读:
    C++(四十)— C++中一个class类对象占用多少内字节
    C++(三十九) — 主函数中增加调试信息
    C++(三十八) — 继承方式、访问控制、构造和析构、虚继承
    ambari部署Hadoop集群(1)
    小波分析和多尺度几何分析
    正则化与矩阵范数
    设计模式之:创建型设计模式
    设计模式六大原则(详细)
    UML类关系(依赖,关联,聚合,组合,泛化,实现)
    SSD详解
  • 原文地址:https://www.cnblogs.com/vincentmax/p/14376484.html
Copyright © 2011-2022 走看看