Vue中v-if和v-show的区别
2020-05-21 本文已影响0人
Jure_joe
1、v-if的特点:每次都会删除和创建元素
2、v-show的特点：每次都不会对DOM进行删除和创建，只是切换了元素的display样式而已
如下图
image.png
image.png
3v-if和v-show的区别(使用于微信小程序中的wx:if这个API)
v-if有较高的切换性能消耗
v-show有较高的初始渲染消耗
如果涉及频繁的切换最好不要用v-if，推荐使用v-show
如果元素在页面初始化后就做是否显示的判断，之后不会再切换，则推荐使用v-if
上示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type='button' value='toggle' @click='flag=!flag'></input>
<div class="div" v-if='flag'>这是v-if</div>
<div class="div" v-show='flag'>这是v-show</div>
</div>
<script type='text/javascript'>
const vm = new Vue({
el:'#app',
data:{
flag:true
},
methods:{
}
})
</script>
</body>
</html>
