Vue使用v-if和v-else报错

如题,前端小白一个,刚开始学vue,直接上代码:

     <div id="app">
      <div v-if="isActive">显示</div>
      <div v-else >隐藏</div>
      <button @click="changeAAA">click</button>
     </div>
    <script>
      new Vue({
        el:'#app',
        data:{
          isActive:true
        },
        methods: {
          changeAAA(){
            console.log(this.isActive)
            this.isActive = !this.isActive
          }
        }
      })
    </script>

想实现的功能也很简单,就是点击click,切换状态isActive的值,然后对应展示显示和隐藏.运行结果报错:

 

应该要把v-if和v-else两个标签放在一起,就可以了. 

 <div id="app">
      <div v-if="isActive">显示</div>
      <div v-else >隐藏</div>
      <button @click="changeAAA">click</button>
    </div>