--categories:
- vue基础
tags: - vue条件渲染
目录
条件渲染
v-if ,v-else-if ,v-else 与 v-show
v-if 和v-show 的区别
v-if初始化时没有额外的渲染开销，会修改DOM节点的，开销较大
v-show会在渲染时，自动增加节点渲染。
当需要节省渲染开销时，使用v-show
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue起步和插值</title>
</head>
<body>
<div id="app">
<span>v-if v-else</span>
<!-- Math.random() 随机产生0到1之间的随机数 -->
<div v-if='Math.random() > 0.5'>
显示
</div>
<div v-else>
隐藏
</div>
<hr>
<span>v-if v-else</span>
<!-- isShow变量定义在data数据中 -->
<div v-if='isShow'>
显示
</div>
<div v-else>
隐藏
</div>
<hr>
<span>show</span>
<!-- show变量定义在data数据中 -->
<div v-show='show'>
显示
</div>
</div>
<!-- 1. 引包-->
<script src="./vue.js"></script>
<script>
// 2.初始化
const vm = new Vue({
el: '#app',
// 数据属性
data: {
isShow: Math.random() > 0.5 ,
show:false
}
})
</script>
</body>
</html>