v-if 和 v-show的区别

条件渲染

指令:

• v-if、v-else-if、v-else
  • v-if 系列指令绑定的标签中间不能写其他标签
  • v-if 条件成立渲染DOM,不成立不渲染DOM
• v-show
  条件成立不成立都渲染DOM,显示和隐藏通过css的display:none;属性来控制的

    <p v-if="type == 0">0000</p>
    <p v-else-if="type == 1">1111</p>
    <p v-else-if="type == 2">2222</p>
    <p v-else>3333</p>

    <p v-show="isSuccess">成功</p>
    <p v-show="!isSuccess">失败</p>

    <script>
        new Vue({
            data: {
                type: 1, // type总共有4中情况  0、1、2、其他
                isSuccess: true // 两种情况 true / false
            }
        })
    </script>

v-if 和 v-show 的使用场景
当条件不是频繁变化的时候,推荐使用v-if
当条件频繁发生改变的时候,推荐使用v-show