vue3技术入门-条件语法
2023-02-25 18:22:17 时间
v-if
v-if
对应的就是if
语句,当条件为真的时候渲染页面
<text v-if="show">Show</text>
const show = ref(true)
以上代码中当show
的值为true
的时候text
标签渲染
v-else
对应的是
else
,同if-else
用法:
<text v-if="show">Show</text>
<text v-else>Disappear</text>
<div class="btn" @click="show = !show">点击</div>
const show = ref(true)
当show
的值为true
时,页面如下:
点击按钮show
的值改为false
,页面如下:
v-else-if
使用的方式同
else if
语句,这里不细说了,大家可自行尝试。
template标签上的 v-if
如果我们想切换不止一个元素,那么可以把要被切换的元素用
<template>
包裹,这个标签不会被渲染它是一个包装容器。v-else
和v-else-if
也可以在<template>
上使用。
<template v-if="show">
<div class="name">name</div>
<div>box 1</div>
<div>box 2</div>
</template>
v-show
v-show
同v-if
的效果是一样的,但是有所不同的是v-show
知识改变的元素的display
属性隐藏了元素,v-if
是真实的把元素干掉了。v-show
不支持在<template>
上使用
本文简单介绍vue3的一些常用命令命令,仅供参考。
相关文章
- C/C++ Qt 选择夹TabWidget组件应用
- C/C++ Qt ToolBar 菜单栏组件应用
- C/C++ Qt 基础通用组件的应用
- C/C++ Qt QChart 绘图组件应用
- C/C++ Qt QThread 线程组件应用
- C/C++ Qt 基本文件读写方法
- git指令速查
- Linux 命令(228)—— shopt 命令(builtin)
- Linux 命令(229)—— readonly 命令(builtin)
- Linux 命令(230)—— set 命令(builtin)
- 嵌入式:交换指令之SWP,MRS,MSR
- [gitlab] 分支删除触发 gitlab CI
- golang 使用 Context 实现 IoC 容器
- golang gin 使用 context 实现 ioc
- go1.17 泛型尝鲜
- golang 中的时间处理
- golang 声明变量中的下划线是什么意思
- 同一个 gitlab-ci 文件能使用多个 runner 吗?
- [golang] 环境变量操纵与踩过的坑
- golang 括号用法总结