详解 Vue 的 v-if 和 v-show
Vue 中的 v-if 和 v-show:#
v-if 和 v-show 都可以切换元素的显示和隐藏#
区别:v-if 的话是直接把元素移除掉了,而 v-show 只是隐藏了元素,元素还在内存中,如果需要频繁地切换使用 v-show 比较好#
使用如下:#
<div id="app">
<input type="button" value="点我切换显示" @click="ok=!ok" />
<p v-if="isShow">成功</p>
<p v-else>失败</p>
<div v-if="score>=90">一血</div>
<div v-else-if="score>=60">双杀</div>
<div v-else-if="score>=80">三杀</div>
<div v-else-if="score>=90">四杀</div>
<div v-else>五杀</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
isShow:false,
ok:false,
score: 90
}
})
</script>
Vue 的 v-if 和 v-show 总结就这么多吧!#
作者:Carver-大脸猫
出处:https://www.cnblogs.com/carver/articles/17115935.html
版权:本作品采用「署名-非商业性使用-相同方式共享 4.0 国际」许可协议进行许可。
转载请注明原处
本文来自博客园,作者:Carver-大脸猫,转载请注明原文链接:https://www.cnblogs.com/carver/articles/17115935.html
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· AI与.NET技术实操系列:基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 25岁的心里话
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 按钮权限的设计及实现