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 相关文章推荐
基于jquery的防止大图片撑破页面的实现代码(立即缩放)
Oct 24 Javascript
js事件监听机制(事件捕获)总结
Aug 08 Javascript
JavaScript判断变量是否为空的自定义函数分享
Jan 31 Javascript
jQuery Validate初步体验(一)
Dec 12 Javascript
Bootstrap Table服务器分页与在线编辑应用总结
Aug 08 Javascript
详解基于angular路由的requireJs按需加载js
Jan 20 Javascript
easyUI下拉列表点击事件使用方法
May 18 Javascript
Javascript(es2016) import和require用法和区别详解
Aug 11 Javascript
使用jquery的jsonp如何发起跨域请求及其原理详解
Aug 17 jQuery
微信小程序滚动Tab实现左右可滑动切换
Aug 17 Javascript
Vue+elementUI实现多图片上传与回显功能(含回显后继续上传或删除)
Mar 23 Javascript
详细分析vue响应式原理
Jun 22 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&amp;&amp;mysql)五
2006/10/09 PHP
针对初学PHP者的疑难问答(1)
2006/10/09 PHP
解析yahoo邮件用phpmailer发送的实例
2013/06/24 PHP
PHP学习笔记(二):变量详解
2015/04/17 PHP
PHP采用超长(超大)数字运算防止数字以科学计数法显示的方法
2016/04/01 PHP
php 判断字符串编码是utf-8 或gb2312实例
2016/11/01 PHP
详解PHP swoole process的使用方法
2017/08/26 PHP
ThinkPHP5 框架引入 Go AOP,PHP AOP编程项目详解
2020/05/12 PHP
php7 新增功能实例总结
2020/05/25 PHP
今天是星期几的4种JS代码写法
2013/09/17 Javascript
nodejs npm包管理的配置方法及常用命令介绍
2014/06/05 NodeJs
在Javascript中处理字符串之big()方法的使用
2015/06/08 Javascript
vee-validate vue 2.0自定义表单验证的实例
2018/08/28 Javascript
angular inputNumber指令输入框只能输入数字的实现
2019/12/03 Javascript
vue addRoutes路由动态加载操作
2020/08/04 Javascript
[00:57]林俊杰助阵DOTA2亚洲邀请赛
2015/01/28 DOTA
[54:09]RNG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.23
2019/09/05 DOTA
Windows平台Python连接sqlite3数据库的方法分析
2017/07/12 Python
Python3使用正则表达式爬取内涵段子示例
2018/04/22 Python
利用python修改json文件的value方法
2018/12/31 Python
Python3 读取Word文件方式
2020/02/13 Python
Python JSON常用编解码方法代码实例
2020/09/05 Python
Python tkinter实现日期选择器
2021/02/22 Python
利用python实现后端写网页(flask框架)
2021/02/28 Python
英国最大的电脑零售连锁店集团:PC World
2016/10/10 全球购物
Zavvi美国:英国娱乐之家
2017/03/19 全球购物
荷兰街头时尚之家:Funkie House
2019/03/18 全球购物
英国比较机场停车场网站:Airport Parking Essentials
2019/12/01 全球购物
解除聘用合同证明书范本
2014/09/11 职场文书
小学优秀学生评语
2014/12/29 职场文书
上课说话检讨书
2015/01/27 职场文书
佛光寺导游词
2015/02/10 职场文书
2015中秋节慰问信范文
2015/03/23 职场文书
运动会报道稿大全
2015/07/23 职场文书
2016大学生暑期社会实践心得体会
2016/01/14 职场文书
python3 hdf5文件 遍历代码
2021/05/19 Python