Vue 标签显示/隐藏的方式对比demo - 水行者

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

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>

以上是 Vue 标签显示/隐藏的方式对比demo - 水行者 的全部内容， 来源链接： utcz.com/z/380959.html

回到顶部