v-if、v-else、v-show的使用以及区别
1.v-if和v-else
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/vue.min.js" ></script>
</head>
<body>
<div id="example">
<p v-if="ok">我是对的</p>如果是真执行if，否则执行v-else语句
<p v-else="ok">我是错的</p>
</div>
<script type="text/javascript">
var example=new Vue({
el:'#example',
data:{
ok:false
}
})
</script>
</body>
</html>
2.v-if和v-show的差别以及使用
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/vue.min.js" ></script>
</head>
<body>
<div id="example">
<p v-show="ok">hello!</p>
<p v-show="greeting">hello!</p>
</div>
<script type="text/javascript">
var example=new Vue({
el:"#example",
data:{
greeting:false,
ok:false
}
})
</script>
</body>
</html>
在页面检查元素可以看到
使用v-if的标签直接消失了，使用v-show的p标签是将display属性改为none
总结
v-if每次会删除元素标签，v-show是修改元素的display属性,v-if：属性有较高的切换性能，v-show有较高的初始消耗性能如果元素涉及频繁的切换不要用v-if,如果一个元素永远不会被看到建议使用v-if
原创文章 73
获赞 64
访问量 2736