鍍金池/ 問答/HTML/ vue中給template組件添加 v-show,v-if后，整個vue中div

vue中給template組件添加 v-show,v-if后，整個vue中div的內(nèi)容都顯示不出來了？

下面代碼顯示空白，也沒有報錯，為什么呢？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/vue/2.3.0/vue.min.js"></script>
</head>
<body>
<div id="box">
  <h1>我是父級頁面</h1>
   <hr>
   <!-- 當(dāng)子頁面添加，v-show,v-if屬性后，整個#box的內(nèi)容都顯示不出來了？？ -->
  <!-- <test-child v-show="switch"></test-child> -->
  <test-child v-if="switch"></test-child>
  <!-- <test-child></test-child> -->
</div>


<template id="test">
   <div>
      <h1>我是子頁面</h1>
    </div>
</template>


<script>
    new Vue({
        el:"#box",
        data:{
            switch:false
        },
        methods:{
        },
        computed:{
        },
        components:{
            "test-child":{
              template:"#test"
            }
        }
    })
</script>
</body>
</html>
回答
編輯回答
胭脂淚

修改成下面這樣就可以了，switch關(guān)鍵字不能用在變量，和函數(shù)名上，否則頁面就會顯示不出來；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/vue/2.3.0/vue.min.js"></script>
</head>
<body>
<div id="box">
  <h1>我是父級頁面</h1>
  <button  @click="switchFun()">切換子頁面</button>
   <hr>
   <!-- 當(dāng)添加子頁面添加，v-show,v-if后，整個#box的內(nèi)容都顯示不出來了？？ -->
  <!-- <test-child v-show="isshow"></test-child> -->
  <div v-if="isshow">
      <test-child></test-child>
  </div>

  <!-- <test-child></test-child> -->
</div>


<template id="test">
   <div>
      <h1>我是子頁面</h1>
    </div>
</template>


<script>
    new Vue({
        el:"#box",
        data:{
            isshow:false
        },
        methods:{
          switchFun:function(){
            this.isshow=!this.isshow;
          }
        },
        computed:{
        },
        components:{
            "test-child":{
              template:"#test"
            }
        }
    })
</script>
</body>
</html>
2017年12月24日 18:10
編輯回答
命于你
<script src="https://cdn.bootcss.com/vue/2.3.0/vue.js"></script>

開發(fā)環(huán)境別用壓縮的。用上面這個，有錯誤提示。

2018年3月28日 19:11