<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>条件渲染</title>
<script type="text/javascript" src="../vue.js"></script>
</head>
<body>
<div id="root">
<!-- 第一部分-->
<!-- <h2 v-show="showSwitch">欢迎 {{name}}</h2>-->
<!-- <h2 v-if="showIf">欢迎 {{name}}</h2>-->
<!-- 第二部分-->
<h2>n当前值为{{n}}</h2>
<button @click="n++">n+1</button>
<!-- <div v-if="n === 1">Test1</div>-->
<!-- <div v-else-if="n === 2">Test2</div>-->
<!-- <div v-else-if="n === 3">Test3</div>-->
<!-- <div v-else>Pass</div>-->
<!-- 第三部分-->
<template v-if="n === 1">
<h2>Test-1</h2>
<h2>Test-2</h2>
<h2>Test-3</h2>
</template>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false
const vm = new Vue({
el: "#root",
data:{
name: '哈哈哈',
showSwitch: true,
showIf: true,
n: 0,
}
})
</script>
</html>