Vue3 条件渲染 v-if

简介: Vue3 条件渲染 v-if

v-if 指令:用于控制元素的显示或隐藏。

执行条件:当条件为 false 时,会将元素从 DOM 中删除。

应用场景:适用于显示隐藏切换频率较低的场景。

语法格式:

<div v-if="数据">内容</div>

基础用法:

<template>
  <h3>条件渲染 v-if</h3>
  <p v-if="status">内容</p>
  <button @click="status = !status">显示/隐藏</button>
</template>
 
<script setup>
import { ref } from "vue";
let status = ref(true);
</script>

效果:

注:当条件为 false 时,会将该元素从 DOM 中删除

配合 JS 表达式使用:

<template>
  <h3>条件渲染 v-if</h3>
  <p v-if="num == 5">内容</p>
  <button @click="num++">增加({{ num }})</button>
</template>
 
<script setup>
import { ref } from "vue";
let num = ref(0);
</script>

效果:

注:v-if 会将计算结果转换为 true 或 false,再进行创建或删除元素

配合 v-else 和 v-else-if 使用

<template>
  <h3>条件渲染 v-else 和 v-else-if</h3>
  <p>当前 num 的值是:{{ num }}</p>
  <button @click="num++">点击num+1</button>
  <p v-if="num == 1">张三</p>
  <p v-else-if="num == 2">李四</p>
  <p v-else-if="num == 3">王五</p>
  <p v-else>你谁呀?</p>
</template>
 
<script setup>
import { ref } from "vue";
let num = ref(0);
</script>

效果:

注:v-else 和 v-else-if 必须紧跟在 v-if 的后边,标签之间紧挨着不能被打断。另外 v-else 不需要写执行条件。

相关文章
|
6天前
|
JavaScript 前端开发 开发者
vue3+ts配置跨域报错问题解决:> newpro2@0.1.0 serve > vue-cli-service serve ERROR Invalid options in vue.
【6月更文挑战第3天】在 Vue CLI 项目中遇到 &quot;ERROR Invalid options in vue.config.js: ‘server’ is not allowed&quot; 错误是因为尝试在 `vue.config.js` 中使用不被支持的 `server` 选项。正确配置开发服务器(如代理)应使用 `devServer` 对象,例如设置代理到 `http://xxx.com/`: ```javascript module.exports = { devServer: {
20 1
|
6天前
|
JavaScript 前端开发 数据安全/隐私保护
vue3+ts+elementplus写一个登录页面教程
【6月更文挑战第3天】本文介绍了如何使用 Vue 3 和 TypeScript 创建一个登录页面。首先,需安装 Vue CLI,然后创建新项目并启用 TypeScript 支持。接着,创建 `Login.vue` 组件,设计登录表单,包括用户账号、密码和验证码字段,并实现相关验证规则。页面样式包括背景、登录框和按钮等元素的布局与样式。最后,展示了`&lt;script&gt;`部分的代码,包括表单验证逻辑、生成验证码的函数以及登录提交处理。文章还提供了一个登录页面的截图和完整代码示例。
27 1
|
8天前
|
JavaScript 编译器 API
vue2和vue3区别
vue2和vue3区别
15 4
|
6天前
|
缓存 JavaScript 前端开发
Nuxt.js实战:Vue.js的服务器端渲染框架
Nuxt.js提供了开发、构建和部署的完整工作流。使用nuxt命令启动开发服务器,nuxt build进行生产构建,nuxt start启动生产服务器
14 0
|
6天前
|
JavaScript API
vue3+element实现一个公告面板
vue3+element实现一个公告面板
33 0
vue3+element plus图片预览点击按钮直接显示图片的预览形式
vue3+element plus图片预览点击按钮直接显示图片的预览形式
|
7天前
|
存储 JavaScript 前端开发
vue3获取本地的当前时间转化为年月日显示然后计算之后一周的时间
vue3获取本地的当前时间转化为年月日显示然后计算之后一周的时间
|
7天前
|
存储 JavaScript API
Vue 3 中实现引导页
Vue 3 中实现引导页