<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--
1. 条件渲染指令
v-if
v-else
v-show
2. 比较v-if与v-show
他们在实现原理上有细微不同：
v-if在进入不同条件时会加载/渲染标签元素（会降低性能，造成卡顿）
v-show会一次性加载出所有元素，然后使用属性对显示与隐藏进行控制
如果需要频繁切换 v-show 较好
-->
<div id="d1">
<p v-if="flag1">我爱vue</p>
<p v-else>vue爱我</p>
<p v-show="flag2">我爱台妹</p>
<p v-show="!flag2">台妹爱我</p>
</div>
<script type="application/javascript" src="../js/vue.js"></script>
<script type="application/javascript">
new Vue({
el: '#d1',
data: {
flag1 : false,
flag2 : false
}
})
</script>
</body>
</html>
