},
{
id: 3,
title: '这两个地球之眼是真的吗？形成原因至今仍是谜团',
content: '一名俄罗斯男子乘坐直升机游览时，经过俄罗斯萨哈林岛（库页岛）时，看到一个巨大的坑洞。地球上坑坑洞洞很多，本该不用大惊小怪。但当飞机离得更近，换了个角度看这个坑时，他震惊了，这分明就是“地球的眼睛”。'
}
],
selectedPost: null
}
},
template: `
<div class="posts-tab">
<ul class="posts-sidebar">
<li
v-for="post in posts"
v-bind:key="post.id"
v-bind:class="{selected:post === selectedPost}"
v-on:click="selectedPost = post">
{{ post.title }}
</li>
</ul>
<div class="selected-post-container">
<div
v-if="selectedPost"
class="selected-post">
<h3>{{ selectedPost.title }}</h3>
<div v-html="selectedPost.content"></div>
</div>
<strong v-else>
请点击某个标签页
</strong>
</div>
</div>
`
});
Vue.component('tab-archive', {
template: '<div>archive 页面</div>'
});
new Vue({
el: '#dynamic-component-demo',
data: {
currentTab: 'Posts',
tabs: ['Posts', 'Archive'] },
computed: {
currentTabComponent: function () {
return 'tab-' + this.currentTab.toLowerCase();
}
}
});
css：
.tab-button {
padding: 6px 10px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
border: 1px solid #ccc;
cursor: pointer;
background: #f0f0f0;
margin-bottom: -1px;
margin-right: -1px;
}
.tab-button:hover {
background: #e0e0e0;
}
.tab-button.active {
background: #e0e0e0;
}
.tab {
border: 1px solid #ccc;
padding: 10px;
}
.posts-tab {
display: flex;
}
.posts-sidebar {
max-width: 40vw;
margin: 0;
padding: 0 10px 0 0;
list-style-type: none;
border-right: 1px solid #ccc;
}
.posts-sidebar li {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
cursor: pointer;
}
.posts-sidebar li:hover {
background: #eee;
}
.posts-sidebar li.selected {
background: lightblue;
}
.selected-post-container {
padding-left: 10px;
}
.selected-post > :first-child {
margin-top: 0;
padding-top: 0;
}效果：
