<body>
<!-- vue 条件渲染 -->
<div id="root">
<h1>欢迎来到{{name}}的课堂</h1>
<h2 v-show="false">{{student}}欢迎来到{{name}}的课堂</h2>
<h3 v-if="false">{{student}}欢迎来到{{name}}的课堂</h3>
<h1>当前点击N值为：{{n}}</h1>
<button @click="n++">点击我n++</button>
<h1>显示div</h1>
<div class="no1" v-show="n===1">我是第一个n++ </div>
<div class="no2" v-show="n===2">我是第2个n++ </div>
<div class="no3" v-if="n===3">我是第3个n++ </div>
<div class="no3" v-else-if="n===3">我是第3个n++ </div>
<div class="no3" v-else>快点击按钮我切换</div>
<!-- if 之间的div 不能被断开 -->
<h1>这里可以显示全部</h1>
<template v-if="n===1">
<!--template 只能配合v-if 使用 -->
<h2>云南</h2>
<h2>水电费</h2>
<h2>很贵</h2>
</template>
</div>
<script>
Vue.config.productionTip=false;//阻止运行时提示开发版本
new Vue({
el:"#root",
data:{
name:'许杰然',
student:'小明',
n:0 //初始值0
}
})
</script>
</body>
