v-if

  • 用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。

    1.   <section  id="app">
    2.       <div v-if = 'is'>123456</div>
    3.   </section>
    5.   <script>
    6.       const vm = new Vue ({
    7.           el:"#app",
    8.           data:{
    9.               msg:'lallalal',
    10.               is:true,
    11.           }
    12.       });
    13.   </script>

    当 is:0 时也就是条件不成立时，页面会没有该元素，之有一个注释如下图 蓝色区域是该元素显示的地方
    说明v-if是操作dom的
    image.png

    多个元素

    因为 v-if 是一个指令，所以必须将它添加到一个元素上，但是如果想切换多个元素呢？此时可以把一个 <template> 元素当做不可见的包裹元素，并在上面使用 v-if。最终的渲染结果将不包含 <template> 元素

    1. <template v-if="ok">
    2. <h1>Title</h1>
    3. <p>Paragraph 1</p>
    4. <p>Paragraph 2</p>
    5. </template>

    v-else

  • 为 v-if 或者 v-else-if 添加“else 块”。

  • 注意：前一兄弟元素必须有 v-if 或 v-else-if

    1. <div v-if="Math.random() > 0.5">
    2. 33
    3. </div>
    4. <div v-else>
    5. 你看不见33啦
    6. </div>

    v-else-if

  • 表示 v-if 的 “else if 块”。可以链式调用。

  • 注意：前一兄弟元素必须有 v-if 或 v-else-if

    1. <div v-if="type === 'A'">
    2. A
    3. </div>
    4. <div v-else-if="type === 'B'">
    5. B
    6. </div>
    7. <div v-else-if="type === 'C'">
    8. C
    9. </div>
    10. <div v-else>
    11. Not A/B/C
    12. </div>

    v-show

  • 根据表达式之真假值，切换元素的 display CSS 属性。

    1. <h1 v-show="ok">Hello!</h1>

    v-if 与 v-show 的区别

  1. v-if 是惰性的，如果在初始渲染时条件为假，则什么也不做，直到条件第一次变为真时，才会开始渲染条件块。v-show则不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
  2. v-if 有更高的切换开销，v-show 有更高的初始渲染开销，如果需要非常频繁地切换，则使用 v-show 较好，如果在运行时条件很少改变，则使用 v-if 较好
  3. v-show不支持<template>元素
  4. v-show不支持v-else/v-else-if