CSS
.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;
background: red;
}
JS
var app = new Vue({
el: '#app',
data: {
posts: [
{
id: 1,
title: 'Title 001',
content: '<p>content001</p>'
},
{
id: 2,
title: 'Title 002',
content: '<p>content002</p>'
},
{
id: 3,
title: 'Title 003',
content: '<p>content003</p>'
}
],
selectedPost: null
}
})
HTML
<html>
<head>
<link rel="stylesheet" href="index.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<p>slot</p>
<div class="posts-tab" id="app">
<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>
This is default page.
</strong>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
解析：
当页面没有被点击时，selectedPost 为 null ，
<div class="selected-post-container">模块，走v-else流程，显示默认状态
当点击Title 002时，selectedPost 为 posts[1] ，
<div class="selected-post-container">模块，走v-if流程，显示 posts[1]数据
