vue基础指令if和show的区别

 v-if指令   
    
        (1)作用： 根据条件渲染数据
        (2)语法： 
            单分支：     v-if="条件语句"
            双分支：     v-else
            多分支:      v-else-if="条件语句"
        (3)注意点
            v-else与v-else-if的前面  必须要有  v-if 或者 v-else-if

    <div id="app">
        <!-- lazy :懒加载，输入框失去焦点vue才会渲染数据  -->
        <input type="text" v-model.lazy="score" placeholder="请输入考试分数">
        <h2>你的考试分数为：{{ score }}</h2>
        <hr>
        <h3 v-if="score>=90">爸爸给你买法拉利</h3>
        <h3 v-else-if="score>=80">爸爸给你买保时捷</h3>
        <h3 v-else-if="score>=60">爸爸给你买奥迪</h3>
        <h3 v-else>爸爸给你爱的掌声</h3>
    </div>

v-show指令

        (1)作用： 设置元素的display属性值
        (2)语法： v-show="属性值"
            属性值为true:   元素的display:block
            属性值为false:   元素的display:none
        (3)v-show与v-if区别
            v-if  : 条件渲染。  如果不满足条件，则该元素不会添加到DOM树中
            v-show: 显示与隐藏。 只是修改元素的display属性值

v-if与v-show的区别

• 1.v-if : 本质是在动态的创建 或者 删除元素节点

  • 应用场景：如果是不用频繁切换, 要么显示, 要么隐藏的情况, 适合于用 v-if

    • v-if 是惰性的, 如果初始值为 false, 那么这些元素就直接不创建了, 节省一些初始渲染开销

• 2.v-show: 本质是在控制元素的 css 样式, display: none;

  • 应用场景：如果是频繁的切换显示隐藏, 用 v-show

    • v-if, 频繁切换会大量的创建和删除元素, 消耗性能