为啥不对？
<!DOCTYPE html>
<div id="dynamic-component-demo" class="demo">
<button v-for="tab in tabs" :key="tab" :class="['tab-button', { active:currentTab === tab }]" @click="currentTab = tab">{
{
tab }}</button>
<compoent :is="currentTabComponent" class="tab"></compoent>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const app = Vue.createApp({
data() {
return {
currentTab: 'Home',
tabs: ['Home', 'Posts', 'Archive']
}
},
computed: {
currentTabComponent() {
return 'tab-' + this.currentTab.toLowerCase()
}
}
})
app.component('tab-home', {
template: `<div class="demo-tab">Home component</div`})
app.component('tab-posts', {
template: `<div class="dynamic-component-demo-posts-tab">
<ul class="dynamic-component-demo-posts-sidebar">
<li v-for="post in posts" :key="post.id" :class="{'dynamic-component-demo-active':post === selectedPost}" @click="selectedPost = post">{
{ post.title }}</li>
</ul>
<div class="dynamic-component-demo-post-container">
<div v-if="selectedPost" class="dynamic-component-demo-post">
<h3>{
{ selectedPost.title }}</h3>
<div v-html="selectedPost.content"></div>
</div>
<strong v-else>
Click on a blog title to the left to view it.
</strong>
</div>
</div>`,
data() {
return 
最低0.47元/天 解锁文章
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
