显示/隐藏+ v-on：单击可进行单页复制vue.js

Question

我尝试使用von：click v-button的v-show / v-if调用spa中的不同元素（3个html页面，如首页，登录和聊天页面）。

有人有清楚的例子吗？

Answer 1

new Vue({
  el: '#app',
  data() {
    return {
      page: 'login'
    }
  },
  methods: {
    loginClick() {
      this.page = 'home'
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>

<div id="app">
  <div v-if="page === 'login'">
    <button @click="loginClick">Login</button>
  </div>
  <div v-if="page === 'home'">
    home page
    <a href="" @click.prevent="page = 'chat'">go to chat</a>
  </div>
  <div v-if="page === 'chat'">
    chat page
  </div>
</div>