条件渲染总结

这篇文章已经发布超过一年了,内容可能已经过时,请谨慎参考。

条件渲染总结

learn/vue3

一、基础指令

  1. v-if

    • 功能:根据表达式真假条件渲染内容
    • 特点:惰性渲染(初始为false时不渲染)
    • 示例:

    <h1 v-if="awesome">Vue is awesome!</h1>

  2. v-else

    • 功能:添加”else”逻辑块
    • 规则:
      • 必须紧跟v-if/v-else-if
      • 中间不能插入其他元素
    • 示例: <h1 v-if="awesome">Vue is awesome!</h1> <h1 v-else>Oh no 😢</h1>
  3. v-else-if

    • 功能:添加多条件判断
    • 规则:
      • 必须紧跟v-if/v-else-if
      • 可连续多次使用
    • 示例:
    VUE
    1
    2
    3
     <div v-if="type === 'A'">A</div>
     <div v-else-if="type === 'B'">B</div>
     <div v-else>Not A/B</div>

二、