Vue 根据条件进行渲染

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: '
content001
'
      },
      {
        id: 2,
        title: 'Title 002',
        content: '
content002
'
      },
      {
        id: 3,
        title: 'Title 003',
        content: '
content003
'
      }
    ],
    selectedPost: null
  }
})

HTML

    
        
        
    
    
        
slot
        

          

            

              {{ post.title }}
            
          
          

            

              
{{ selectedPost.title }}
              

            
            
              This is default page.
            
          
        

        
    

解析：
当页面没有被点击时，selectedPost 为 null ，

模块，走v-else流程，显示默认状态

当点击Title 002时，selectedPost 为 posts[1] ，

模块，走v-if流程，显示 posts[1]数据