Vue.js 中的 v-show 指令及用法详解

更新时间：2018年11月19日 09:00:43 作者：deniro

v-show 指令通过改变元素的 css 属性（display）来决定元素是显示还是隐藏。这篇文章主要介绍了Vue.js 中的 v-show 指令及用法详解,需要的朋友可以参考下

1 用法

v-show 指令通过改变元素的 css 属性（display）来决定元素是显示还是隐藏。

html：

<div id="app">
  <p v-show="type==='科技'">大数据之下的锦鲤：为什么你的微博总抽不到奖</p>
</div>

js：

<script>
  var app = new Vue({
    el: '#app',
    data: {
      type:'技术'
    }
  });
</script>

渲染后代码：

<p style="display: none;">大数据之下的锦鲤：为什么你的微博总抽不到奖</p>

因为元素样式被设置为 display: none; ，所以元素就被隐藏啦O(∩_∩)O~

2 与 v-if 比较

v-show 指令的功能与 v-if 指令相似。不过 v-if 指令会根据表达式重建或销毁元素或组件以及它们所绑定的事件。v-show 指令只是简单地设置 css 属性。

因为 v-if 指令开销较大，所以更适合条件不经常改变的场景。而 v-show 指令适合条件频繁切换的场景。

下面看下vue指令之v-show的用法

1、判断谋个元素是否显示或隐藏

<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、三目运算符判断

<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>

其实这个也可以简写成第一种形式

<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 指令及用法详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对程序员之家网站的支持！

您可能感兴趣的文章:

Element?Plus的el-tree-select组件懒加载+数据回显详解
el-tree-select组件是el-tree和el-select的结合体,他们的原始属性未被更改,下面这篇文章主要给大家介绍了关于Element?Plus的el-tree-select组件懒加载+数据回显的相关资料,需要的朋友可以参考下
2022-11-11
基于vue2实现上拉加载功能
这篇文章主要为大家详细介绍了基于vue2实现上拉加载功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-11-11
如何在Vue中使用debouce防抖函数
本文主要介绍在Vue中使用debouce防抖函数，设置一个门槛值，表示两次?Ajax?通信的最小间隔时间。如果在间隔时间内，发生新的keydown事件，则不触发?Ajax?通信，并且重新开始计时。如果过了指定时间，没有发生新的keydown事件再将数据发送出去，这便是debouce防抖函数
2021-12-12
vue表单数据交互提交演示教程
今天小编就为大家分享一篇vue表单数据交互提交演示教程，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-11-11
Vue2+SpringBoot实现数据导出到csv文件并下载的使用示例
本文主要介绍了Vue2+SpringBoot实现数据导出到csv文件并下载,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
2023-10-10
前端axios取消请求总结详解
这篇文章主要为大家介绍了前端axios取消请求总结示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-10-10
新版vue-cli模板下本地开发环境使用node服务器跨域的方法
这篇文章主要介绍了新版vue-cli模板下本地开发环境使用node服务器跨域的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-04-04
vue项目Luckysheet的使用
这篇文章主要介绍了vue项目Luckysheet的使用,目前Luckysheet不支持使用npm安装包，所以只能使用CDN引入依赖，在vue项目的public/index.html文件里引入即可，本文通过示例代码给大家详细介绍，需要的朋友可以参考下
2022-08-08
vue3使用vue-count-to组件的实现
这篇文章主要介绍了vue3使用vue-count-to组件的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-12-12
Vue实现商品放大镜效果
这篇文章主要为大家详细介绍了Vue实现商品放大镜效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-09-09