Vue.js 中的 v-show 指令及用法详解
GPT4.0+Midjourney绘画+国内大模型 会员永久免费使用!
【 如果你想靠AI翻身,你先需要一个靠谱的工具! 】
1 用法
v-show 指令通过改变元素的 css 属性(display)来决定元素是显示还是隐藏。
html:
js:
渲染后代码:
因为元素样式被设置为 display: none; ,所以元素就被隐藏啦O(∩_∩)O~
2 与 v-if 比较
v-show 指令的功能与 v-if 指令相似。不过 v-if 指令会根据表达式重建或销毁元素或组件以及它们所绑定的事件。v-show 指令只是简单地设置 css 属性。
因为 v-if 指令开销较大,所以更适合条件不经常改变的场景。而 v-show 指令适合条件频繁切换的场景。
下面看下vue指令之v-show的用法
1、判断谋个元素是否显示或隐藏
1 2 3 4 | <el-button v-show= "list.power == 1" @click= "toUpload" class= "toUpload" type= "primary" > 去上传<i class= "el-icon-upload el-icon--right" > </i> </el-button> |
通过接口里的参数list.power是否等于1,如果等于1,则为“true”,否则为“false”,然后v-show指令,等于true的时候显示,false的时候隐藏。
2、三目运算符判断
1 | <a class= "warn" v-show= "true ? item.ai != null : item.ai == null" :href= "'http://172.168.80.149:14081/gateway/upload/upload/downloadFile?url='+item.urlai" rel= "external nofollow" rel= "external nofollow" >AI</a> |
其实这个也可以简写成第一种形式
1 | <a class= "warn" v-show= "!item.ai == null" :href= "'http://172.168.80.149:14081/gateway/upload/upload/downloadFile?url='+item.urlai" rel= "external nofollow" rel= "external nofollow" >AI</a> |
这样更简单哦
总结
以上所述是小编给大家介绍的Vue.js 中的 v-show 指令及用法详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
![](http://files.jb51.net/skin/2018/images/jb51ewm.png)
微信公众号搜索 “ 脚本之家 ” ,选择关注
程序猿的那些事、送书等活动等着你
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!
相关文章
Vue router/Element重复点击导航路由报错问题及解决
这篇文章主要介绍了Vue router/Element重复点击导航路由报错问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2022-07-07element el-tree组件的动态加载、新增、更新节点的实现
这篇文章主要介绍了element el-tree组件的动态加载、新增、更新节点的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2020-02-02Vue全局注册中的kebab-case和PascalCase用法
这篇文章主要介绍了Vue全局注册中的kebab-case和PascalCase用法,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2023-03-03关于webpack-dev-server配置代理解决前端开发中的跨域问题
这篇文章主要介绍了关于webpack-dev-server配置代理解决前端开发中的跨域问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-08-08
最新评论