在VueJS中不工作的组件之间动态切换

Question

我用以下html和js:练习VueJS

HTML:

<div id="app">
<ui class="nav nav-tabs">
<li class="nav-item">
<a href="#"
class="nav-link custom"
@click="currentView = 'home-component'"
:class="{ 'active': currentView === 'home-component' }">Home</a>
</li>
<li class="nav-item">
<a href="#"
class="nav-link custom"
@click="currentView = 'list-component'"
:class="{ 'active': currentView === 'list-component' }">List</a>
</li>
<li class="nav-item">
<a href="#"
class="nav-link custom"
@click="currentView = 'about-component'"
:class="{ 'active': currentView === 'about-component' }">About</a>
</li>
</ui>
<div class="app-body">
<home-component v-if="currentView === 'home-component'" />
<list-component v-if="currentView === 'list-component'" />
<about-component v-if="currentView === 'about-component'" />
</div>
</div>

VueJS:

const vm = new Vue({    
data() {
return {
currentView: 'list-component'
}
},
components: {
'home-component': {
template: '<div>Home Component</div>'
},
'list-component': {
template: '<div>List Component</div>'
},
'about-component': {
template: '<div>About Component</div>'
}
}
});
vm.$mount('#app');

当我点击标签时，我似乎不知道如何让组件切换。但当我使用is特殊属性时，组件可以正常工作：

<div class="app-body">
<home-component v-bind:is="currentView" />
<list-component v-bind:is="currentView" />
<about-component v-bind:is="currentView" />
</div>

在不使用is特殊属性的情况下单击选项卡时，如何正确切换组件？

Answer 1

试试这个：

<div class="app-body">
<div :is="currentView" />
</div>

这将取代"；div"；其中组件存在于"；currentView"；