<!DOCTYPE html>
<html>
<head>
<Meta charset="utf-8">
<title></title>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!--
条件渲染：
1.v-if
写法：1.v-if="表达式"
2.v-else-if = '表达式'
3.v-else = '表达式'
适用于：切换频率较低的场景
特点：不展示的DOM元素直接删除
2.v-show：
写法：v-show = '表达式'
适用于：切换频率较高的场景
特点：不展示的Dom元素不会被删除，仅仅隐藏掉
3.备注：使用v-if时可能获取不到的元素，v-show一定可以获取到
-->
<div id="app">
<h2>当前n值是{{n}}</h2>
<button @click="n++">切换</button>
<div v-show="n === 1">angular</div>
<div v-show="n === 2">react</div>
<div v-show="n === 3">vue</div>
<div v-if="n === 4">W</div>
<div v-else-if ="n === 5">Q</div>
<div v-else-if ="n === 6">e</div>
<div v-else>Q</div>
<!--template只能配合v-if使用 -->
<template v-if="m ===1">
<div></div>
<div></div>
<div></div>
<div></div>
</template>
</div>
<script type="text/javascript">
new Vue({
el:'#app',
data:{
n:0
}
})
</script>
</body>
</html>
