v-if、v-else、v-else-if

官网：https://cn.vuejs.org/v2/guide/#%E6%9D%A1%E4%BB%B6%E4%B8%8E%E5%BE%AA%E7%8E%AF
控制切换一个元素是否显示可以在标签中使用v-if
与v-else搭配形成二目分支
与v-else-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>
    <script src="js/vue.js"></script>
</head>
<body>
    <div class="out">
        <h1 v-if="false">1我的世界</h1>
        <h1 v-else-if="false">2MineCraft</h1>
        <h1 v-else>3单机版</h1>
    </div>
</body>
</html>
<script>
    new Vue({
        el:".out",  // 绑定类选择器
        data:{
        }
    })
</script>

观察结果：
可以看到v-if和v-else-if都是false值，所以显示v-else

变量控制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>
    <script src="js/vue.js"></script>
</head>
<body>
    <div class="out">
        <h1 v-if="isShow">1我的世界</h1>
        <h1 v-else-if="false">2MineCraft</h1>
        <h1 v-else>3单机版</h1>
    </div>
</body>
</html>
<script>
    new Vue({
        el:".out",  // 绑定类选择器
        data:{
            isShow:true,
        }
    })
</script>

12行的v-if判断第22行定义的isShow键值对的值

效果：

v-if 练习

data中设置一个day键值
周一到周日根据day的值只显示其中一天

代码如下:

<!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>
    <script src="js/vue.js"></script>
</head>
<body>
    <div class="out">
        <h1 v-if="isShow">1我的世界</h1>
        <h1 v-else-if="false">2MineCraft</h1>
        <h1 v-else>3单机版</h1>
        <hr>
        <div v-if="day==1">今天是周1</div>
        <div v-else-if="day==2">今天是周2</div>
        <div v-else-if="day==3">今天是周3</div>
        <div v-else-if="day==4">今天是周4</div>
        <div v-else-if="day==5">今天是周5</div>
        <div v-else-if="day==6">今天是周6</div>
        <div v-else-if="day==7">今天是周日</div>
        <div v-else="day==">格式错误</div>
    </div>

</body>
</html>
<script>
    new Vue({
        el:".out",  // 绑定类选择器
        data:{
            isShow:true,
            day:4
        }
    })
</script>

16-23行，在v-if 中使用表达式，根据表达式判断的值来确认是true还是false
33行：使用new Date().getDay() 来获取当天为周几
测试：

v-if 嵌套循环

和普通的js代码类似：

    if(false){
        if(true){
            console.log(111)
        }else{
            console.log(222)
        }
    }else{
        if(false){
            console.log(333)
        }else{
            console.log(444)
        }
    }

控制台打印结果：

Vue的v-if嵌套也可以类推出来：

        <div v-if="false">
            <div v-if="true">111</div>
            <div v-else>222</div>
        </div>
        <div v-else>
            <div v-if="false">333</div>
            <div v-else>444</div>
        </div>

结果：

补充

Expand Abbreviation

Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的一个工具. 在前端开发的过程中，一大部分的工作是写 HTML、CSS 代码。特别是手动编写 HTML 代码的时候，效率会特别低下，因为需要敲打很多尖括号，而且很多标签都需要闭合标签等。于是就有了 Emmet，它可以极大的提高代码编写的效率，它提供了一种非常简练的语法规则，然后立刻生成对应的 HTML 结构或者 CSS 代码，同时还有多种实用的功能帮助进行前端开发。

VsCode内置了Emmet语法,在后缀为.html/.css中输入缩写后按Tab键即会自动生成相应代码

请注意在VsCode新版本中按Tab不再默认启用Emmet展开缩写!需要在首选项配置中将emmet.triggerExpansionOnTab设置为true值!

教程文档：https://www.cnblogs.com/summit7ca/p/6944215.html

例如：
div{今天是周$}*8
效果如下：

    <div>今天是周1</div>
    <div>今天是周2</div>
    <div>今天是周3</div>
    <div>今天是周4</div>
    <div>今天是周5</div>
    <div>今天是周6</div>
    <div>今天是周7</div>
    <div>今天是周8</div>

[VUE2]三、If条件渲染