Vue3条件语句学习笔记

在Vue3中，条件渲染是指根据表达式的真假来决定是否渲染一个元素。这可以通过Vue3提供的指令来实现。

v-if指令

v-if指令用于在满足条件时渲染一个元素。当条件为false时，该元素将从DOM中移除。

语法

htmlCopy Code
<div v-if="condition">渲染的元素</div>

示例

htmlCopy Code
<template>
  <div>
    <div v-if="isLoggedIn">欢迎访问我们的网站！</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoggedIn: true
    };
  }
};
</script>

运行以上代码，当isLoggedIn为true时，页面上将显示“欢迎访问我们的网站！”；当isLoggedIn为false时，该元素将从DOM中移除。

v-else指令

v-else指令用于在v-if表达式为false时渲染一个元素。它必须紧随v-if或v-else-if指令之后，并且在同一兄弟元素中使用。

语法

htmlCopy Code
<div v-if="condition">渲染的元素1</div>
<div v-else>渲染的元素2</div>

示例

htmlCopy Code
<template>
  <div>
    <div v-if="isLoggedIn">欢迎访问我们的网站！</div>
    <div v-else>请先登录以访问我们的网站。</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoggedIn: false
    };
  }
};
</script>

运行以上代码，当isLoggedIn为true时，页面上将显示“欢迎访问我们的网站！”；当isLoggedIn为false时，页面上将显示“请先登录以访问我们的网站。”。

v-else-if指令

v-else-if指令用于在前面的v-if或v-else-if表达式为false并且当前表达式为true时渲染一个元素。它必须紧随上一条v-if或v-else-if指令之后，并且在同一兄弟元素中使用。

语法

htmlCopy Code
<div v-if="condition1">渲染的元素1</div>
<div v-else-if="condition2">渲染的元素2</div>
<div v-else>渲染的元素3</div>

示例

htmlCopy Code
<template>
  <div>
    <div v-if="isVIP">欢迎VIP会员来访问我们的网站！</div>
    <div v-else-if="isLoggedIn">欢迎访问我们的网站！</div>
    <div v-else>请先登录以访问我们的网站。</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVIP: true,
      isLoggedIn: false
    };
  }
};
</script>

运行以上代码，当isVIP为true时，页面上将显示“欢迎VIP会员来访问我们的网站！”；当isVIP为false且isLoggedIn为true时，页面上将显示“欢迎访问我们的网站！”；当isVIP和isLoggedIn都为false时，页面上将显示“请先登录以访问我们的网站。”。

v-show指令

v-show指令与v-if指令类似，用于根据表达式的真假来控制一个元素的显示和隐藏。然而，与v-if指令不同的是，v-show指令不会在DOM中移除元素，而是使用CSS的display属性来控制元素的显示和隐藏。

语法

htmlCopy Code
<div v-show="condition">渲染的元素</div>

示例

htmlCopy Code
<template>
  <div>
    <div v-show="isLoggedIn">欢迎访问我们的网站！</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoggedIn: true
    };
  }
};
</script>

运行以上代码，当isLoggedIn为true时，页面上将显示“欢迎访问我们的网站！”；当isLoggedIn为false时，该元素会隐藏但不会从DOM中移除。

总结

Vue3的条件渲染可以通过v-if、v-else、v-else-if和v-show指令来实现。这些指令可以根据表达式的真假来控制一个元素的显示和隐藏，从而实现动态渲染页面的效果。