Vue条件渲染

这是我参与更文挑战的第15天，活动详情查看： 更文挑战

1.v-if 和 v-show对比

<div id="app">
    <!--如果为false直接就不存在-->
    <div v-if="show" data-test="v-if">
        {{message}}
    </div>
    <!--display为空(false)和none -->
    <div v-show="show" data-test="v-show">
        {{message}}
    </div>
</div>

<script>
    var vm = new Vue({
        el:'#app',
        data:{
            show:false,
            message:"Hello World"
        }
    })
</script>

v-if 和 v-show都是判断后面的值是true还是false决定页面是否显示，但是处理逻辑不同，v-if如果为false时，这个元素相当于直接被移除了。而v-show是通过css的display来操作；(对应true)和display:none;(对应false)来控制显示或隐藏的。

当你的页面频繁需要隐藏和显示的时候，选择v-show的性能会更好，因为他只需要隐藏显示，不需要重新去删除创建新的元素。

2. v-if 和 v-else

<div id="app">
    <!--每次相当于删除和添加 如果为false直接就不存在-->
    <div v-if="show">
        {{message}}
    </div>
    <div v-else>
        Bye World
    </div>
</div>

<script>
    var vm = new Vue({
        el:'#app',
        data:{
            show:false,
            message:"Hello World"
        }
    })
</script>

程序先判断v-if后的值，因为data中的show是false，所以显示下面的v-else的“Bye World”，如果show为true，则只显示“Hello World”。有一点需要注意：在v-if和v-else中不能有别的东西，不然就会报错。

3. v-if v-else-if v-else

也可以看后面表达式的true和false

<div id="app">
    <!--每次相当于删除和添加 如果为false直接就不存在-->
    <div v-if="show==='boy'">
        {{message}}
    </div>
    <div v-else-if="show==='girl'">
        {{message2}}
    </div>
    <div v-else>
        hhhhhh
    </div>
</div>

<script>
    var vm = new Vue({
        el:'#app',
        data:{
            show:'boy',
            message:"Hello boy",
            message2:"Hello girl"
        }
    })
</script>

此时页面上显示的是Hello boy 此时在控制台输入

vm.show="girl"

v-else-if

4. if和else切换时dom问题

当if和else切换的时候，Vue会尽量的去复用页面上的dom元素内容，当给了key值后Vue会认为这个是唯一的，也就不会去复用这部分的内容，比如说

以下代码，js代码中data的show是false，所以默认显示邮箱名后面一个input框，这时我填入我的邮箱

这时在控制台将show改为true会发现，怎么之前的邮箱框的内容没被替换

从上面可以看出来input的框并没有变成新的空框，内容还是变化前的，这是因为Vue在if else切换的时候保留dom元素，怎么解决呢，让Vue知道这个是唯一的元素，都给一个key值

此时发现是新的input空白框了。