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


Posted in Javascript onNovember 19, 2018

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

Javascript 相关文章推荐
Javascript 各浏览器的 Javascript 效率对比
Jan 23 Javascript
js日期、星座的级联显示代码
Jan 23 Javascript
js获取ajax返回值代码
Apr 30 Javascript
jQuery 删除/替换DOM元素的几种方式
May 20 Javascript
Jquery修改页面标题title其它JS失效的解决方法
Oct 31 Javascript
javascript日期操作详解(脚本之家整理)
Sep 05 Javascript
JS for循环中i++ 和 ++i的区别介绍
Jul 20 Javascript
妙用Bootstrap的 popover插件实现校验表单提示功能
Aug 29 Javascript
Bootstrap框架结合jQuery仿百度换肤功能实例解析
Sep 17 Javascript
vue实现与安卓、IOS交互的方法
Nov 02 Javascript
vue的for循环使用方法
Feb 12 Javascript
如何用JS模拟实现数组的map方法
Jul 30 Javascript
深入浅析Vue.js 中的 v-for 列表渲染指令
Nov 19 #Javascript
为什么说JavaScript预解释是一种毫无节操的机制详析
Nov 18 #Javascript
利用原生的JavaScript实现简单拼图游戏
Nov 18 #Javascript
Javascript实现动态时钟效果
Nov 17 #Javascript
使用Javascript简单计算器
Nov 17 #Javascript
JS实现图片切换效果
Nov 17 #Javascript
js实现导航跟随效果
Nov 17 #Javascript
You might like
php防止伪造的数据从URL提交方法
2014/06/27 PHP
Zend Framework实现将session存储在memcache中的方法
2016/03/22 PHP
php版交通银行网银支付接口开发入门教程
2016/09/26 PHP
php插入含有特殊符号数据的处理方法
2016/11/24 PHP
js内存泄露的几种情况详细探讨
2013/05/31 Javascript
浅谈jQuery的offset()方法及示例分享
2015/07/17 Javascript
Jquery easyui 实现动态树
2015/11/17 Javascript
jQuery实现分隔条左右拖动功能
2015/11/21 Javascript
this,this,再次讨论javascript中的this,超全面(经典)
2016/01/05 Javascript
JS实现倒计时(天数、时、分、秒)
2016/11/16 Javascript
微信小程序 选项卡的简单实例
2017/05/24 Javascript
vue事件修饰符和按键修饰符用法总结
2017/07/25 Javascript
vue实现手机号码抽奖上下滚动动画示例
2017/10/18 Javascript
react高阶组件添加和删除props
2019/04/26 Javascript
vue-cli3.0实现一个多页面应用的历奇经历记录总结
2020/03/16 Javascript
Vue使用路由钩子拦截器beforeEach和afterEach监听路由
2020/11/16 Javascript
vue 在单页面应用里使用二级套嵌路由
2020/12/19 Vue.js
[02:10]2018DOTA2亚洲邀请赛赛前采访-Liquid
2018/04/03 DOTA
举例介绍Python中的25个隐藏特性
2015/03/30 Python
利用Python的Django框架生成PDF文件的教程
2015/07/22 Python
详解Python中的__getitem__方法与slice对象的切片操作
2016/06/27 Python
Python3.6正式版新特性预览
2016/12/15 Python
python基础之包的导入和__init__.py的介绍
2018/01/08 Python
使用python实现http及ftp服务进行数据传输的方法
2018/10/26 Python
Python实现批量修改图片格式和大小的方法【opencv库与PIL库】
2018/12/03 Python
CSS3制作3D立方体loading特效
2020/11/09 HTML / CSS
HTML5中的Article和Section元素认识及使用
2013/03/22 HTML / CSS
HTML5+css3:3D旋转木马效果相册
2017/01/03 HTML / CSS
银行会计业务的个人自我评价
2013/11/02 职场文书
我的梦中国梦演讲稿
2014/04/23 职场文书
医药公司采购员岗位职责
2014/09/12 职场文书
2014年六五普法工作总结
2014/11/25 职场文书
学生安全责任协议书
2016/03/22 职场文书
Golang 对es的操作实例
2022/04/20 Golang
java实现面板之间切换功能
2022/06/10 Java/Android
CSS中calc(100%-100px)不加空格不生效
2023/05/07 HTML / CSS