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

 更新时间:2018年11月19日 09:00:43   作者:deniro  
v-show 指令通过改变元素的 css 属性(display)来决定元素是显示还是隐藏。这篇文章主要介绍了Vue.js 中的 v-show 指令及用法详解,需要的朋友可以参考下

GPT4.0+Midjourney绘画+国内大模型 会员永久免费使用!
如果你想靠AI翻身,你先需要一个靠谱的工具!

1 用法

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

html:

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

js:

1
2
3
4
5
6
7
8
<script>
  var app = new Vue({
    el: '#app',
    data: {
      type:'技术'
    }
  });
</script>

渲染后代码:

1
<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、判断谋个元素是否显示或隐藏

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

蓄力AI

微信公众号搜索 “ 脚本之家 ” ,选择关注

程序猿的那些事、送书等活动等着你

原文链接:https://www.jianshu.com/p/56dc8de1abae

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!

相关文章

  • antd design table更改某行数据的样式操作

    antd design table更改某行数据的样式操作

    这篇文章主要介绍了antd design table更改某行数据的样式操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-10-10
  • Vue vant使用ImagePreview实现预览图片

    Vue vant使用ImagePreview实现预览图片

    这篇文章主要介绍了Vue vant使用ImagePreview实现预览图片,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • Vue router/Element重复点击导航路由报错问题及解决

    Vue router/Element重复点击导航路由报错问题及解决

    这篇文章主要介绍了Vue router/Element重复点击导航路由报错问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-07-07
  • vue实现密码显示隐藏功能的思路详解

    vue实现密码显示隐藏功能的思路详解

    这篇文章主要介绍了vue实现密码显示隐藏功能的思路详解,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-03-03
  • vue Echarts实现仪表盘案例

    vue Echarts实现仪表盘案例

    这篇文章主要为大家详细介绍了vue Echarts实现仪表盘案例,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • element el-tree组件的动态加载、新增、更新节点的实现

    element el-tree组件的动态加载、新增、更新节点的实现

    这篇文章主要介绍了element el-tree组件的动态加载、新增、更新节点的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-02-02
  • Vue全局注册中的kebab-case和PascalCase用法

    Vue全局注册中的kebab-case和PascalCase用法

    这篇文章主要介绍了Vue全局注册中的kebab-case和PascalCase用法,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-03-03
  • 关于webpack-dev-server配置代理解决前端开发中的跨域问题

    关于webpack-dev-server配置代理解决前端开发中的跨域问题

    这篇文章主要介绍了关于webpack-dev-server配置代理解决前端开发中的跨域问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-08-08
  • vue项目网站全局置灰功能实现示例详解

    vue项目网站全局置灰功能实现示例详解

    这篇文章主要为大家介绍了vue项目网站全局置灰功能实现示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-12-12
  • 使用watch监听对象里面值的变化

    使用watch监听对象里面值的变化

    这篇文章主要介绍了使用watch监听对象里面值的变化,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-01-01

最新评论