先来看看v-if的最简单使用：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue.js 学习</title>
<link rel="stylesheet" href="styles.css">
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<!--app是根容器 -->
<div id="app">
<h1> v-if 条件 </h1>
<button v-on:click="error= !error">change error</button>
<button v-on:click="success= !success">change success</button>
<p v-if="error">网络连接错：404</p>
<p v-else-if="success">网络连接成功：200</p>
</div>
<script src="app.js"></script>
</body>
</html>
区别：
1.手段：v-if是通过控制dom节点的存在与否来控制元素的显隐；v-show是通过设置DOM元素的display样式，block为显示，none为隐藏；在页面第一次加载的时候会默认添加上style="display: none;"的属性v-if和v-show特性总结
1.编译方面：按控制手段和官方文献可知，v-if是惰性的，若最初指令值为false，它是不会编译的，直至指令值为true才开始局部编译存入缓存；v-show不管最初指令值为真假都会马上编译存入缓存，保留DOM。
2.消耗方面：v-if切换性能消耗较大；v-show最初渲染消耗较大。
3.适用场景：v-if适用切换条件、项目需求稳定；v-show适用频繁需要切换。
4.语法方面：v-if可与v-else、v-else-if配合使用进行判断执行，但一定需要相邻，不可中断；v-show无特殊语法。
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
