Kann jemand herausfinden, woher das Problem kommen könnte? ? Ich erhalte keine Fehlermeldungen, aber die Seite zeigt keinen Inhalt an Ich versuche, den Inhalt einer Seite anzuzeigen, ohne zur Seite zu navigieren, aber wenn ich auf die Links klicke, werden sie nicht angezeigt
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue基础</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li v-for="(value, index) in pages" class="nav-item" :key="index">
<a class="nav-link active"
aria-current="page"
:href="value.link.url"
:title="`This link goes to the ${value.link.text} page`"
@click.prevent ="activePage = index"
>{{value.link.text}}</a>
</li>
</ul>
</div>
</nav>
<div id="content" class="container">
<h1>{{ pages[activePage].pageTitle }}</h1>
<p>{{ pages[activePage].content }}</p>
</div>
<script>
const { createApp} = Vue
createApp({
setup() {
return {
activePage: 0,
pages:[
{
link: {text: 'Home', url:'index.html'},
pageTitle : 'Hello, Vue',
content: 'Welcome to the world of vue'
},
{
link: {text: 'Link', url:'link.html'},
pageTitle : 'Hello, Vue',
content: 'This is the link text'
},
{
link: {text: 'Contact', url:'contact.html'},
pageTitle : 'Hello',
content: 'This is the contact page'
}
]
}
}
}).mount('body');
</script>
</body>
</html>
问题在于
activePage不是响应式的。将其创建为ref，使其能够对变化做出响应。const { createApp, ref } = Vue; createApp({ setup() { const activePage = ref(0); return { activePage, pages: [{"link":{"text":"Home","url":"index.html"},"pageTitle":"Hello, Vue","content":"Welcome to the world of vue"},{"link":{"text":"Link","url":"link.html"},"pageTitle":"Hello, Vue","content":"This is the link text"},{"link":{"text":"Contact","url":"contact.html"},"pageTitle":"Hello","content":"This is the contact page"}], }; }, }).mount("#app");<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous"> <script src="https://unpkg.com/vue@3"></script> <div id="app"> <nav class="navbar navbar-expand-lg bg-body-tertiary"> <div class="container-fluid"> <ul class="navbar-nav me-auto mb-2 mb-lg-0"> <li v-for="(value, index) in pages" class="nav-item" :key="index"> <a class="nav-link active" aria-current="page" :href="value.link.url" :title="`This link goes to the ${value.link.text} page`" @click.prevent="activePage = index">{{value.link.text}}</a> </li> </ul> </div> </nav> <div id="content" class="container"> <h1>{{ pages[activePage].pageTitle }}</h1> <p>{{ pages[activePage].content }}</p> </div> </div>