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>
    

      

  • 相关阅读:
    5.Hiveguigun滚(ノ`Д)ノ竟然竞争谨慎谨慎谨慎哈喇子罢工八公
    4.HadoopMapRe程序设计
    3.MapReduce原理和Yarn
    java注解
    各种操作系统远程windows服务器
    protocol-buffers
    反向生成实体类
    java 反射
    web api 返回数据
    Newtonsoft.Json
  • 原文地址:https://www.cnblogs.com/guozhe/p/14851961.html
Copyright © 2011-2022 走看看