Vue.js v-show

本文目录结构

v-show

• 预期：any

用法

根据表达式之真假值，切换元素的 display CSS 属性。

当条件变化时该指令触发过渡效果。

参考

条件渲染 - v-show

用法

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

<div id="app">
  <p v-show="type==='阿西河'">阿西河前端教程</p>
</div>

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

渲染后代码：

<p style="display: none;">阿西河前端教程</p>

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

三目运算符判断

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

这样更简单

不能和 v-else 配合使用

v-else 是不能和 v-show 配合使用。如果需要做到 v-if 和 v-else 那样配合，可以用以下写法。

<!--HTML 代码-->
<div id="app">
    <div v-show="yes">Yes</div>
    <!--下面的div进行取反-->
    <div v-show="!yes">No</div>
</div>

/*JS代码*/
new Vue({
    el: '#app',
    data: {
        yes: true
    }
)}

与 v-if 比较

v-show 指令的功能与 v-if 指令相似。

不过 v-if 指令会根据表达式重建或销毁元素或组件以及它们所绑定的事件。

v-show 指令只是简单地设置 css 属性。

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

• （1）对于管理系统的权限列表的展示，这里可以使用 v-if 来渲染，如果使用到 v-show，对于用户没有的权限，在网页的源码中，仍然能够显示出该权限，如果用 v-if，网页的源码中就不会显示出该权限。（在前后台分离情况下，后台不负责渲染页面的场景。）
• （2）对于前台页面的数据展示，这里推荐使用 v-show，这样可以减少开发中不必要的麻烦。

官网的说法

v-if 是真实的条件渲染，因为它会确保条件块在切换当中适当地销毁与重建条件块内的事件监听器和子组件。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——在条件第一次变为真时才开始局部编译（编译会被缓存起来）。

相比之下，v-show 简单得多——元素始终被编译并保留，只是简单地基于 CSS 切换。

一般来说，v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。

因此，如果需要频繁切换使用 v-show 较好，如果在运行时条件不大可能改变则使用 v-if 较好。

小结

• v-if 是真正的条件渲染，会根据表达式适当的销毁或重建元素及绑定的事件或子组件。
• v-show 是简单的 CSS 属性切换，无论条件真假都会被编译。
• v-if 适合条件不经常改变的场景，V-show 适用于频繁切换条件。
• 手段：v-if 是动态的向 DOM 树内添加或者删除 DOM 元素；v-show 是通过设置 DOM 元素的 display 样式属性控制显隐；
• 编译过程：v-if 切换有一个局部编译 / 卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show 只是简单的基于 css 切换；
• 编译条件：v-if 是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译（编译被缓存？编译被缓存后，然后再切换的时候进行局部卸载）; v-show 是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且 DOM 元素保留；
• 性能消耗：v-if 有更高的切换消耗；v-show 有更高的初始渲染消耗；
• 在<template>元素用法的不同
  • <template>元素能帮我们把一组内容放到 <template> 这个根标签里。但浏览器不会渲染这个标签。
  • v-if 是可以和 <template> 标签配合使用的。但 v-show 不行。因为上面说了，浏览器不会渲染这个标签。所以根本不可能在这个标签上设置什么 CSS 样式。
• v-if 有缓存功能，v-show 没有