v-if与v-show

最新推荐文章于 2024-10-11 17:39:47 发布

cabacwj

最新推荐文章于 2024-10-11 17:39:47 发布

阅读量65

点赞数 1

文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/cabacwj/article/details/126937902

版权

v-if与v-show

代码如下：

<!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>
    <!-- v-show和v-if都可以来控制标签的显示与隐藏
        <标签 v-show='布尔值'><标签>
        <标签 v-if='布尔值'><标签>
        当布尔值为true，他们就显示；当布尔值为false，他们就隐藏，
    -->
    <div id="app">
     <div v-show="display">我是v-shw控制的</div>
     <div v-if="display">我是v-if控制的</div>

    </div>
    <script src="./vue.js"></script>

    <script>
        new Vue({
            el:'#app',
            data:{
                 display:true
            }
        })
    </script>
    <!-- 面试题！重要！重要！重要！
    【v-show】
    1.本质就是标签display设置为none，控制隐藏。只是基于css进行切换。
    2.v-show有更高的初始渲染消耗。
    3.v-show适合频繁切换的情况。

    【v-if】
    1.动态的向DOM树内添加或者删除DOM元素。
    2.v-if有更高的切换消耗。
    3.v-if社和运行条件很少改变的情况。
    -->
</body>
</html>

效果图：

v-if的使用

代码如下：

<!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">
        <!-- 多分支 if-->
        <h3>根据护牙菜赚了多少钱，决定今天中午吃什么</h3>
        <div v-if="money >=1000">定南人家卡一顿</div>
        <div v-else-if="money >500">就老板街走一趟</div>
        <div v-else-if="money >100">烤鱼店泡一下午</div>
        <div v-else>谁毛桃</div>

        <!-- 双分支 if-->
        <div v-if="age >=18">成年了，烤鱼店走起</div>
        <div v-else>未成年，哦写</div>
    </div>

    <script src="./vue.js"></script>

    <script>
        new Vue({
            el:'#app',
            data:{
                money:300,
                age:29
            }
        })
    </script>
</body>
</html>

效果图：

v-show的使用

代码如下：

<!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">
        <!-- 多分支 if-->
        <h3>根据护牙菜赚了多少钱，决定今天中午吃什么</h3>
        <div v-show="money >=1000">定南人家卡一顿</div>
        <div v-show="money >500">就老板街走一趟</div>
        <div v-show="money >100">烤鱼店泡一下午</div>
        <div v-show>谁毛桃</div>

        <!-- 双分支 if-->
        <div v-show="age >=18">成年了，烤鱼店走起</div>
        <div v-show="age <18">未成年，哦写</div>
    </div>

    <script src="./vue.js"></script>

    <script>
        new Vue({
            el:'#app',
            data:{
                money:300,
                age:29
            }
        })
    </script>
</body>
</html>

效果图：