vue的v-if条件渲染和v-show的使用与区别

1、v-if：v-if,v-else-if,v-else,三个必须连续使用，中间加其他东西会是条件渲染失效。

<div class="app">
        <!-- 多选一 ：v-if v-else-if v-else-->
        <!-- 中间不能有多余的标签 -->
        <div v-if = "name === '多吃点'">多吃点</div>
        <!-- <div></div> -->
        <div v-else-if = "name === '的晚风'">的晚风</div>
        <div v-else>cerrgbth</div>
    </div>

2、v-show：v-show:布尔值

<div class="app">   
        <!-- 不管初始条件是什么,元素总会被渲染,只是css样式改变 -->
        <!-- 如果需频繁切换,使用v-show 反之使用v-if -->
        <div v-show = 'true'>得分v个人吧</div>
        <div v-show = 'false'>的AFSGDRHFT</div>
    </div>

 使用vue时，要引入vue,且new一个vue对象。

<!-- cdn引入vue2 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>


// mvvm模型
    let app = new Vue({
        el: ".app",//选中渲染区域，区域内可以使用下面的data
        data: {
            name: "的晚风"
        }
    })

3、两者的区别：

     1）v-if不满足条件时，使用元素直接从dom中删除了；v-show不满足条件时，只是display:none隐藏了，元素还存在。

      2）v-if只有在满足条件时才会被渲染；v-show从一开始就被渲染了。

      3）v-if切换开销高；v-show初始渲染开销高。频繁切换适用v-show,运用时条件改变少适用v-if