Seko AI短剧一键生成成片 Laper 剧本策划到成片协作 LiblibAI 图片视频多模态创作剧云中文短剧剧本制作平台

PHP MySQL jquery HTML CSS

Vue教程 Vue扩展 Vue参考

简介指令 v-bind v-if 条件语句 v-show v-for 循环语句事件 v-on 方法事件修饰符表单 v-model CSS 绑定 Computed 计算属性观察者模板扩展和安装第一个 SFC 页面组件 Props 选项 v-for 组件 $emit() Fallthrough 属性范围样式组件插槽 v-slot 指令作用域插槽动态组件 Teleport 传送 HTTP 请求模板参考生命周期钩子 Provide/Inject 路由表单输入动画动画与 v-for 构建组合 API 内置属性组件实例

Vue教程

简介指令 v-bind v-if 条件语句 v-show v-for 循环语句事件 v-on 方法事件修饰符表单 v-model CSS 绑定 Computed 计算属性观察者模板

Vue参考

内置属性组件实例

Vue 教程

浏览29559

更新时间2025-08-22

v-if 条件语句 v-for 循环语句

`v-show` 与 `v-if`

v-show 和 v-if 之间的区别在于 v-if 根据条件创建（渲染）元素，但 v-show 元素已经创建，仅 v-show 改变其可见性。

因此，切换对象的可见性时最好使用 v-show，因为浏览器更容易做到，并且可以带来更快的响应和更好的用户体验。

使用 v-if 而不是 v-show 的原因是 v-if 可以与 v-else-if 和 v-else 一起使用。

在下面的示例中，v-show 和 v-if 分别用于两个不同的 <div> 元素，但基于相同的 Vue 属性。您可以打开示例并检查代码，发现 v-show 保留了 <div> 元素，并且仅将 CSS 显示属性设置为"none"，但 v-if 实际上破坏了 <div> 元素。

示例

仅当 showDiv 属性设置为"true"时才显示两个 <div> 元素。如果 showDiv 属性设置为"false"，并且我们使用浏览器检查示例页面，我们可以看到带有 v-if 的 <div> 元素被破坏，但带有 v-show 的 <div> 元素只是将 CSS 显示属性设置为"none"。

<div id="app"> <div v-show="showDiv">Div tag with v-show</div> <div v-if="showDiv">Div tag with v-if</div> </div> <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> <script> const app = Vue.createApp({ data() { return { showDiv: true } } }) app.mount('#app') </script> »

Vue 练习

通过练习测试自己

练习题:

填写缺失的部分，以便 Vue 根据"lightOn"布尔数据属性为我们切换下面 <div> 标签的可见性。

<div id="app">
  <div id="lightDiv">
    <div ="lightOn"></div>
    <img src="img_lightBulb.svg">
  </div>
  <button v-on:click=" lightOn =! lightOn ">Switch light</button>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  const app = Vue.createApp({
    data() {
      return {
        lightOn: false
      }
    }
  })
  app.mount('#app')
</script>

v-if 条件语句 v-for 循环语句

相关视频

更多

免费

前端入门_HTML5

初级前端入门_HTML5: 64.8万次学习
收藏

免费

30分钟学会网站布局

初级30分钟学会网站布局: 24.6万次学习
收藏

免费

CSS视频教程-玉女心经版

初级CSS视频教程-玉女心经版: 41.1万次学习
收藏

免费

JavaScript极速入门_玉女心经系列

初级JavaScript极速入门_玉女心经系列: 76.4万次学习
收藏

科技资讯

更多

华为发布六大电力全球样板点，以AI与能源双向赋能驱动电力新未来

新方法、新组织、新工具：华为发布AI行业落地新路径

华为云企业级AI产品全面落地做最开放的Agentic Cloud

以灵衢互联为核心，打造集群与超节点协同的新计算架构

华为发布全球首个采用NPO的超节点——昇腾960超节点

华为坤灵升级“4+10+N”场景化方案，发布“经纬计划”和50个样板点

佳能发布全画幅相机 EOS R8 Mark II：2420 万像素、新增支持机身防抖，9999 元

全球首款AI智能体手机正式上市！努比亚NaviX Ultra 5499元起

佳能发布Dual Pixel 3D Converter应用软件，可将照片生成3D模型

24小时阅读榜

更多

1

如何使用 CSS 容器查询实现“父容器尺寸驱动”的响应式布局

2

Go语言Channel死锁问题深度解析与实战修复指南

3

Go语言并发编程中Channel未关闭引发的死锁问题详解

4

Go Channel死锁全解析：原理、排查与预防

5

WordPress 自定义字段数值排序与条件筛选完整教程

6

网页打印中强制在内部触发分页的完整解决方案

7

如何批量将指定文件夹中的MP4视频无损转为AVI格式并保持原文件名

8

批量转换指定目录下多个MP4视频为AVI格式（保持原文件名）

9

为动态生成的元素分配唯一 ID 并按顺序绑定编号

10

如何修复绝对定位导致背景图消失的问题

11

如何在页面卸载前自定义提示并安全提交考试数据

12

如何正确使用 Pandas 的 astype() 进行类型安全的日期索引构建

13

如何通过 AJAX 正确获取并显示 PHP 数据库查询结果

14

如何在浏览器刷新或离开页面前弹出确认提示并执行提交逻辑

15

Stream Chat 中自定义系统消息的头像与名称

精品课程

更多

PHP实战天龙八部之微信支付视频教程

PHP实战天龙八部之微信支付视频教程

共5课时

18万人学习

PHP实战天龙八部之仿爱奇艺电影网站

PHP实战天龙八部之仿爱奇艺电影网站

共49课时

82万人学习

前端入门_HTML5

共29课时

64.9万人学习

CSS视频教程-玉女心经版

共25课时

41.2万人学习

JavaScript极速入门_玉女心经系列

JavaScript极速入门_玉女心经系列

共43课时

76.6万人学习

独孤九贱(1)_HTML5视频教程

独孤九贱(1)_HTML5视频教程

共25课时

64.1万人学习

独孤九贱(2)_CSS视频教程

独孤九贱(2)_CSS视频教程

共22课时

24.3万人学习

独孤九贱(3)_JavaScript视频教程

独孤九贱(3)_JavaScript视频教程

共28课时

36.2万人学习

独孤九贱(4)_PHP视频教程

独孤九贱(4)_PHP视频教程

共89课时

133.1万人学习

热门下载

更多

phpStudy 2018最新版

phpStudy 2018最新版

集成PHP7，16种组合，超全大合集

下载

vc9-vc14（32+64位）运行库合集（链接在下方）

vc9-vc14（32+64位）运行库合集（链接在下方）

phpStudy安装所需运行库集合下载

下载

VC9 32位

VC9 32位 phpstudy集成安装环境运行库

下载

VC11 32位

VC11 32位 phpstudy集成安装环境运行库

下载

php程序员工具箱完整版

程序员工具箱 v1.0 php集成环境

下载

VC14 32位

VC14 32位 phpstudy安装环境运行库

下载

SublimeText3汉化版

SublimeText3汉化版

中文版，非常好用

下载

Notepad++ Windows版

Notepad++ Windows版

Notepad++ 8.9.7 Windows版官方安装包，适合 Windows 用户进行代码编辑、文本处理、语法高亮和插件扩展配置。

下载

phpStudy V8.1（Win64位）（已支持php8）

phpStudy V8.1（Win64位）（已支持php8）

Win64位，支持php多版本共存

下载

提交