跟着技术胖学Vue2.0—第二课：v-if v-else v-show指令

哎呦喂iuv

已于 2022-03-25 15:56:46 修改

阅读量566

点赞数

分类专栏： vue2.x学习记录文章标签： vue.js 前端 javascript

于 2021-12-28 10:06:44 首次发布

本文链接：https://blog.csdn.net/ll282991823/article/details/122185475

版权

vue2.x学习记录专栏收录该内容

19 篇文章 4 订阅

订阅专栏

学习回顾

课程主要内容

1、熟悉v-if、v-else、v-show的用法

2、掌握v-if与v-show的区别

操作步骤

1、熟悉v-if、v-else、v-show的用法

第一步，打开vs code，还是用昨天的那个项目来写。首先是index.html里，需要加上一行li，用来显示我们的第二个实例。

这里get到一个新知识点——按住Alt+Shift+⬇，可以直接复制当前行并显示在下一行（仅限vs code）。

<body>
    <h1>Vue2.0实例</h1>
    <br>
    <ol>
        <li><a href="./example/helloworld.html">第一个Vue2.0实例</a></li>
        <li><a href="./example/v-if.html">v-if&v-else$v-show</a></li>
    </ol>
</body>

第二步，在example里新建v-if.html文件，直接复制上次写的helloworld.html里的内容。然后对里面的一些内容稍作修改，这里设置的情景是登录。代码如下：

v-if：

<body>
    <h1>Hello World</h1>
    <hr>
    <div id = 'app'>
        <div v-if='isLogin'>你好，luolan</div>
    </div>

    <script type="text/javascript">
        var app = new Vue({
            el:'#app',
            data:{
                isLogin:true
            }
        })
    </script>
</body>

v-else：

<body>
    <h1>Hello World</h1>
    <hr>
    <div id = 'app'>
        <div v-if='isLogin'>你好，luolan</div>
        <div v-else='isLogin'>请登录！</div>
    </div>

    <script type="text/javascript">
        var app = new Vue({
            el:'#app',
            data:{
                isLogin:false
            }
        })
    </script>
</body>

v-show：这里只展示值为true的结果，为true时和v-if的值一样

<body>
    <h1>Hello World</h1>
    <hr>
    <div id = 'app'>
        <div v-show='isLogin'>你好，luolan</div>
    </div>

    <script type="text/javascript">
        var app = new Vue({
            el:'#app',
            data:{
                isLogin:false
            }
        })
    </script>
</body>