Nach Verwendung der @click.prevent-Methode in Vue wird der Inhalt auf der Seite nicht angezeigt
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>
