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 相关文章推荐
尽可能写&quot;友好&quot;的&quot;Javascript&quot;代码
Jan 09 Javascript
百度 popup.js 完美修正版非常的不错 脚本之家推荐
Apr 17 Javascript
jQuery实现图片放大预览实现原理及代码
Sep 12 Javascript
解析jQuery的三种bind/One/Live事件绑定使用方法
Dec 30 Javascript
node.js中watch机制详解
Nov 17 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之绑定事件
Nov 19 Javascript
完美解决IE9浏览器出现的对象未定义问题
Sep 29 Javascript
分析javascript中9 个常见错误阻碍你进步
Sep 18 Javascript
vue脚手架及vue-router基本使用
Apr 09 Javascript
利用jsonp解决js读取本地json跨域的问题
Dec 11 Javascript
layui输入框只允许输入中文且判断长度的例子
Sep 18 Javascript
vue组件中实现嵌套子组件案例
Aug 31 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 debug 安装技巧
2011/04/30 PHP
PHP实现生成唯一编号(36进制的不重复编号)
2014/07/01 PHP
PHP读取文件内容的五种方式
2015/12/28 PHP
jQuery结合PHP+MySQL实现二级联动下拉列表[实例]
2011/11/15 Javascript
利用谷歌地图API获取点与点的距离的js代码
2012/10/11 Javascript
基于jquery库的tab新形式使用
2012/11/16 Javascript
浏览器打开层自动缓慢展开收缩实例代码
2013/07/04 Javascript
网站基于flash实现的Banner图切换效果代码
2014/10/14 Javascript
jQuery插件EasyUI校验规则 validatebox验证框
2015/11/29 Javascript
javascript cookie用法基础教程(概念,设置,读取及删除)
2016/09/20 Javascript
jquery自定义表单验证插件
2016/10/12 Javascript
jQuery联动日历的实例解析
2016/12/02 Javascript
node.js基于mongodb的搜索分页示例
2017/01/22 Javascript
bootstrap折叠调用collapse()后data-parent不生效的快速解决办法
2017/02/23 Javascript
Thinkjs3新手入门之添加一个新的页面
2017/12/06 Javascript
vue实现文字横向无缝走马灯组件效果的实例代码
2019/04/09 Javascript
Angular请求防抖处理第一次请求失效问题
2019/05/17 Javascript
jupyter安装小结
2016/03/13 Python
利用django如何解析用户上传的excel文件
2017/07/24 Python
使用python画个小猪佩奇的示例代码
2018/06/06 Python
python traceback捕获并打印异常的方法
2018/08/31 Python
Django unittest 设置跳过某些case的方法
2018/12/26 Python
Python内置random模块生成随机数的方法
2019/05/31 Python
django admin.py 外键,反向查询的实例
2019/07/26 Python
Apache部署Django项目图文详解
2019/07/30 Python
Flask框架学习笔记之表单基础介绍与表单提交方式
2019/08/12 Python
Python爬虫爬取煎蛋网图片代码实例
2019/12/16 Python
python 实现在shell窗口中编写print不向屏幕输出
2020/02/19 Python
Django项目uwsgi+Nginx保姆级部署教程实现
2020/04/19 Python
Tomcat Mysql datasource数据源配置
2015/12/28 面试题
奥巴马经典演讲稿
2014/09/13 职场文书
考研复习计划
2015/01/19 职场文书
农村党员干部承诺书
2015/05/04 职场文书
大学生入党自传2015
2015/06/26 职场文书
中秋节感想
2015/08/10 职场文书
python文件与路径操作神器 pathlib
2022/04/01 Python