vue中的v-show&v-if方法详解-- Vue教程中文网 - 打造国内领先的vue学习网站-vue视频,vue教程,vue学习,vue培训

v-show也是根据条件展示元素的指令。带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 是简单地切换元素的 CSS 属性 display 。

v-show 不支持<template>语法，也不支持 v-else。

两者之间的区别：

v-if :

1.是真正的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

2.是惰性的，只有当条件为true时才会渲染，如果条件为false则什么都不做

3.有很高的切换开销，适用于条件不太容易改变的时候

v-show:

1.不管条件是true还是false都会进行渲染。并且只是简单地基于 CSS 进行切换

2.有很高的初始渲染开销，适用于非常频繁地切换

v-show的代码示例如下：


<!DOCTYPE html> 
<html> 
<head>     
    <meta charset="UTF-8">     
    <title></title>     
    <script type="text/javascript"  src="vue.js"></script> 
</head> 
<body> 
<div id="app">    
    <div v-show="flag">        
        you can see me    
    </div> 
</div> 
</body>     
<script>     
var vm = new Vue({         
    el:"#app",         
    data:{             
        flag: true          
    }     
}) 
</script> 
</html>

转载请注明： Vue教程中文网 - 打造国内领先的vue学习网站-vue视频,vue教程,vue学习,vue培训 » vue中的v-show&v-if方法详解