Vue学习：08-条件渲染

最新推荐文章于 2025-12-02 21:41:05 发布

原创最新推荐文章于 2025-12-02 21:41:05 发布 · 279 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #学习 #javascript

Vue入门教程专栏收录该内容

31 篇文章

订阅专栏

一、v-if、v-else-if、v-else

v-if 指令用于条件性地渲染元素；该内容只会在指令的表达式返回真值时才被渲染
v-else-if提供的是相应于v-if的else if区块，它可以连续多次重复使用
你也可以使用v-else为v-if添加一个else区块
v-else和v-else-if指令必须配合v-if指令一起使用，否则它将不会被识别，而且语句块中间不能出现无关其他元素
v-if支持在"<template>"元素上使用，这只是一个不可见的包装器元素，最后渲染的结果并不会包含这个 "<template>"

App.vue

<script setup>

import { ref } from 'vue';

let isShow = ref(false)    //是否显示
let age = ref(20)   //年龄
let week = ref(3)   //周几


</script>

<!-- 视图区域（view） -->
<template>
  是否显示：<input type="checkbox" v-model="isShow">
  <!-- 
    v-if:指令表达式为真时，才会渲染该元素
    为true时会创建该元素，为false时会销毁该元素
   -->
   <h3 v-if="isShow">这是一个普通的标题标签</h3>
   <hr>

   年龄：<input type="range" min="0" max="100" v-model="age">{{ age }}
   <!-- 
    v-if：可以配合v-else-if和v-else来搭建多重判断条件，他们中间不要参杂无关紧要的元素
    -->
    <h1 v-if="age < 18">未成年</h1>
    <!-- <span>无关元素</span> -->
    <h2 v-else-if="age < 35">青年</h2>
    <h3 v-else-if="age < 50">中年</h3>
    <h4 v-else>老年</h4>
    <hr>

    周几：<input type="range" min="1" max="7" v-model="week">{{ week }}
    <!-- 
      v-if:可以配合template元素使用，最后渲染的结果并不会包含这个<template></template>元素
     -->
    <template v-if="week == 1||week == 3||week == 5||week == 7">
      <h1>可以游泳</h1>
    </template>
    <template v-else>
      <h1>不可以游泳</h1>
    </template>
</template>

<style>
  
</style>

二、v-show

● v-show按条件显示一个元素的指令

● v-show会在 DOM 渲染中保留该元素

● v-show仅切换了该元素上名为display的 CSS 属性

● v-show不支持在"<template>"元素上使用，也不能和v-else搭配使用

App.vue

<script setup>

import { ref } from 'vue';

let isShow = ref(false)    //是否显示
let age = ref(20)   //年龄
let week = ref(3)   //周几


</script>

<!-- 视图区域（view） -->
<template>
  是否显示：<input type="checkbox" v-model="isShow">  
   <h3 v-show="isShow">这是一个普通的标题标签</h3>
   <hr>

   年龄：<input type="range" min="0" max="100" v-model="age">{{ age }}
    <h1 v-show="age < 18">未成年</h1>    
    <h2 v-show="age >= 18 && age < 35">青年</h2>
    <h3 v-show="age >= 35 && age < 50">中年</h3>
    <h4 v-show="age >= 50">老年</h4>
    <hr>

    周几：<input type="range" min="1" max="7" v-model="week">{{ week }}
    
    <template v-show="week == 1||week == 3||week == 5||week == 7">
      <h1>可以游泳</h1>
    </template>
    <template v-show="week == 2||week == 4||week == 6">
      <h1>不可以游泳</h1>
    </template>
</template>

<style>
  
</style>