完成条件渲染的学习

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>