currentView:
1
2
3
4
5
6
<div id="example">
currentView:<br>
<component v-bind:is="currentView">
<!-- 组件在 vm.currentview 变化时改变! -->
</component>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
const app = new Vue({
el: '#example',
data: {
currentView: 'home'
},
components: {
home: {
template: '<div>home</div>'
},
posts: {
template: '<div>posts</div>'
},
archive: {
template: '<div>archive</div>'
}
}
});
setInterval(function () {
app.currentView = app.currentView === 'home' ? 'posts' :
app.currentView === 'posts' ? 'archive' :
app.currentView === 'archive' ? 'home' : null;
}, 1000)