完成条件渲染的学习

2 years ago · 8c0906cf47
parent c3c4699362
commit 8c0906cf47
1 changed files with 43 additions and 0 deletions
--- a/11_条件渲染/条件渲染.html
+++ b/11_条件渲染/条件渲染.html
@ -0,0 +1,43 @@
+<!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>