Vue的v-if和v-show

最新推荐文章于 2023-05-29 20:30:36 发布

AIROU_ao

最新推荐文章于 2023-05-29 20:30:36 发布

阅读量193

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/AIROU_ao/article/details/127677134

版权

分支结构

v-if

1- 多个元素通过条件判断展示或者隐藏某个元素。或者多个元素

2- 进行两个视图之间的切换

<div id="app">        <div class="cart">            <!-- 相当于双分支，先判断v-if的条件，如果满足则显示ul隐藏img,反之隐藏ul显示img -->            <!-- 如果购物车有数据显示数据列表 -->            <ul class="list" v-if="cartData.length">                <li>1</li>                <li>2</li>                <li>3</li>                <li>4</li>            </ul>            <!-- 如果没有数据显示 -->            <img v-else class="pic" src="./images/empty_cart.webp" alt="">        </div>        <div class="rightsBox">            <div v-if="cid===1 || cid===0">上架,下架</div>            <div v-if="cid===2 || cid===0">修改价格</div>            <div v-if="cid===3 || cid===0">创建管理员</div>        </div>    </div>    <script>        const app = new Vue({            el: "#app",            data: {                // 空数组转成布尔值为true                cartData: [],                // 根据不同身份权限，显示不同的功能                    // 身份id==> cid=0  所有权限  cid = 1  上架，下架  cid=2 修改价格  cid=3  创建管理员                cid : 0            },            methods: {                           }        })        /*        1. v-if v-else语法        2. v-if v-else-if ... v-else语法        3. v-if中的数据，可以写表达式        4. v-if对于dom节点的操作是什么原理?   直接操作DOM节点的增删        5. 使用场景        */     </script>

v-show

v-show的值为true的时候，当前标签显示，否则隐藏

<div id="app">        <!-- v-show的值为true的时候，当前标签显示，否则隐藏 -->        <p v-show="isShow">11111</p>        <p v-show="!isShow">22222</p>        <input type="button" value="按钮" @click="updateIsShow">    </div>    <script>        const app = new Vue({            el: "#app",            data: {                isShow: true            },            methods: {                updateIsShow(){                    this.isShow=!this.isShow                }            }        })    </script>