一、v-if、v-else-if、v-else（条件渲染指令）

1、v-if后接的是等号：等号后的内容必须是布尔值

2、v-if的基本用法

      <div id="app">
        <p v-if="6<3">{{name1}}</p>
        <p v-else-if="6>3">{{name2}}</p>
        <p v-else>{{name3}}</p>
      </div>
      <script>
        var app=new Vue({
            el:'#app',
            data:{
                name1:'小森',
                name2:'小沈',
                name3:'小顾',
            }
        })
      </script>

//渲染结果：小沈

v-if的弊端 : Vue在渲染元素时，出于效率考虑，会尽可能地复用已有的元素而非重新渲染，因此会出现原来的元素重复出现

        <div id="app">
            v-if用法：
        <div v-if="flag===true">
            姓名：<input type="text" placeholder="输入姓名">
        </div>
        <div v-else>
            密码：<input type="text" placeholder="输入密码">
        </div>
        <button @click="toggleShow">点击切换姓名和密码</button>
      </div>
      <script>
        var app=new Vue({
            el:'#app',
            data:{
                flag:true
            },
            methods:{
                toggleShow(){
                    this.flag=(this.flag===true?false:true)
                }
            }
        })
      </script>

当我们点击按钮时，input里面的内容依旧是小森，并没有进行重新渲染，还是复用了之前的。

解决方法：给不需要复用的元素里加一个唯一的key，提供key值就可以来决定是否复用该元素

        <div id="app">
            v-if用法：
        <div v-if="flag===true">
            姓名：<input type="text" placeholder="输入姓名" key="name">
        </div>
        <div v-else>
            密码：<input type="text" placeholder="输入密码" key="pass">
        </div>
        <button @click="toggleShow">点击切换姓名和密码</button>
      </div>
      <script>
        var app=new Vue({
            el:'#app',
            data:{
                flag:true
            },
            methods:{
                toggleShow(){
                    this.flag=(this.flag===true?false:true)
                }
            }
        })
      </script>

二、v-show

    <div id="app">
        <p v-show="9>a">我被显示1</p>
        <p v-if="9>a">我被显示2</p>
    </div>
    
    <script>
        var app=new Vue({
            el:'#app',
            data:{
                a:10
            }
        })
    </script>

 由此可见

v-if：页面显示就渲染，不显示就移除。如果出事渲染时条件为假，则什么都不做，直到条件为真时开始渲染，是dom操作，在dom树中加进去或者删除掉。而v-show无论初始条件是什么，元素都会被渲染，只是在条件为假时，display为none，条件为真时，则切换css样式。所以当用到获取数据的操作时，需要使用v-if

例如上面切换姓名和密码的案例。如果显示的是姓名，那么就只渲染姓名，密码就会被移除，具体可以看开发者工具中的Elements中是如何变化的。

v-show：v-show的元素永远存在于页面中，只是改变了css中display的属性