zoukankan      html  css  js  c++  java
  • Vue 标签显示/隐藏的方式对比demo

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    
    <body>
        <div id="app">
            <button @click="clearData()">清空数据</button>
            <button @click="recoverData()">恢复数据</button>
            <!-- 1. 通过v-show的方式进行隐藏显示,这样会出现重复多次标签判断 -->
            <ul v-show="items.length>0">
                <li v-for="item in items">{{item.content}}</li>
            </ul>
            <div v-show="items.length>0">v-show方式:共有<span v-text="items.length"></span>条数据</div>
            <!-- 2. 通过添加div进行包裹统一隐藏显示方式,这样会改变原有的DOM模型,div标签会渲染到页面上-->
            <div v-show="items.length>0">
                <ul v-show="items.length>0">
                    <li v-for="item in items">{{item.content}}</li>
                </ul>
                <div v-show="items.length>0">通过添加div进行包裹统一隐藏显示方式:共有<span v-text="items.length"></span>条数据</div>
            </div>
            <!-- 3. 通过添加template进行包裹统一隐藏显示方式,这样不会改变原有的DOM模型-->
            <template v-show="items.length>0">
                <ul v-show="items.length>0">
                    <li v-for="item in items">{{item.content}}</li>
                </ul>
                <div v-show="items.length>0">通过添加template进行包裹统一隐藏显示方式:共有<span v-text="items.length"></span>条数据</div>
            </template>
        </div>
        <script src="./node_modules/vue/dist/vue.js"></script>
        <script>
            const items = [
                {
                    id: 1, //主键id
                    content: 'vue.js',//输入内容
                    completed: false  //是否完成
                },
                {
                    id: 2, //主键id
                    content: 'vue.js',//输入内容
                    completed: true  //是否完成
                },
                {
                    id: 3, //主键id
                    content: 'vue.js',//输入内容
                    completed: false  //是否完成
                }
            ];
            new Vue({
                el: '#app',
                data: {
                    items
                },
                methods: {
                    clearData: function () {
                        this.items = [];
                    },
                    recoverData: function () {
                        this.items = items
                    }
                }
            })
        </script>
    </body>
    
    </html>
    

      

  • 相关阅读:
    低代码能做什么?这家服务商用钉钉宜搭打造了智慧医院管理应用
    【深度】阿里巴巴万级规模 K8s 集群全局高可用体系之美
    如何做规划?分享2种思维和4个方法
    配置审计(Config)配合开启OSS防盗链功能
    被解救的代码
    物联网海量时序数据存储有哪些挑战?
    Serverless:这真的是未来吗?(一)
    数据库学习之MySQL进阶
    网页三剑客之CSS
    网页三剑客之HTML
  • 原文地址:https://www.cnblogs.com/guozhe/p/14851961.html
Copyright © 2011-2022 走看看