Question

我仍在尝试根据用户操作找到轻松的切换视图（例如，单击菜单项）。我阅读了文档，看起来我可以用Dynamic_Components做到这一点所以我写了下一段代码：我无法理解为什么我什么也看不到。我错过了什么？

  var GuestMenu = Vue.extend({
        template: `
              <p>Guest</p>
            `});

   var UserMenu = Vue.extend({
        template: `
                <p>User</p>
            `});

Vue.component('guestmenu', GuestMenu);
Vue.component('usermenu', UserMenu);

var App = Vue({
  el: 'body',
  data:
    {
      currentView: 'guestmenu'
    }
  })

App.currentView: 'guestmenu'

https://jsfiddle.net/cjyr0g8j/

Answer 1

实际上在某处加载vue.js.
App.currentView = 'guestmenu'。
Vue是一个构造函数，您需要使用new调用它。如果你忘记了，它甚至会对你大喊：[Vue warn]: Vue is a constructor and should be called with the 'new' keyword
永远不要安装到或。这也是一个控制台警告！

  var GuestMenu = Vue.extend({
        template: `
              <p>Guest</p>
            `});

   var UserMenu = Vue.extend({
        template: `
                <p>User</p>
            `});
            
Vue.component('guestmenu', GuestMenu);
Vue.component('usermenu', UserMenu);

var App = new Vue({
  el: '#app',
  data:
    {
      currentView: 'guestmenu'
    }
  })

App.currentView = 'usermenu'

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
  <component :is="currentView"> </component>
</div>

如何使用vue.js切换当前视图？

1 个答案: