携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第4天，点击查看活动详情

条件判断

v-if指令初体验

我们在Vue中的条件判断一般使用 v-if 指令，当指令的表达式返回 true 时，该对应的数据才会显示。

• 代码示例：

<div id="demo">
// 使用v-if指令确定是否显示（插入）<p>标签
    <p v-if="seeTrue">现在条件判断为true</p>
</div>
    
<script>
const appDemo = {
  data() {
    return {
      seeTrue: true /* 如果是false，数据就无法显示 */
    }
  }
}
 
Vue.createApp(appDemo).mount('#demo')
</script>

template

v-if是一个指令，所以我们必须将它添加到一个元素上，判断元素是否插入到页面中。如果是多个元素，可以包裹在 <template> 元素上，并在上面使用 v-if。

   <div id="demoapp">
    <template v-if="seeTrue">
        <h1>水果</h1>
        <p>banana</p>
        <p>apple</p>
        <p>watermelon</p>
    </template>
</div>
    
<script>
const demoApps = {
  data() {
    return {
      seeTrue: true 
    }
  }
}
 
Vue.createApp(demoApps).mount('#demoapp')
</script>
    

• 注意：最终的渲染结果将不包含 <template> 元素。

v-else指令

当我们使用v-if时，有时候会需要双条件判断，因此，我们需要一个v-else指令来多一个渲染模板块。

<div id="appdemo">
// 使用Math的随机数函数（0~1），使其乘以10，如果大于五则显示v-if部分，反之则显示v-else部分。
    <div v-if="Math.random()*10 > 5">
      随机数大于5显示这里
    </div>
    <div v-else>
      随机数小于等于5显示这里
    </div>
</div>
    
<script>
Vue.createApp(appdemo).mount('#appdemo')
</script>

v-else-if

有时我们需要多条件判断，为了可以链式的使用多次，因此我们需要v-else-if指令

• 代码示例：

<div id="app">
    <div v-if="types === 'A'">
         A
    </div>
    <div v-else-if="types=== 'B'">
      B
    </div>
    <div v-else-if="types === 'C'">
      C
    </div>
    <div v-else>
     除了ABC以外的字母
    </div>
</div>
    
<script>
const appdemo = {
  data() {
    return {
      types: "B" 
    }
  }
}
 
Vue.createApp(appdemo).mount('#app')
</script>

v-show

如果只有一个条件的话，v-show指令可以平替v-if指令。