1
856{{ pages[activePage].pageTitle }}
{{ pages[activePage].content }}
有人能找出问题可能来自哪里吗？？ 我没有收到任何错误，但是页面没有显示内容 我正在尝试在不导航到页面的情况下显示页面的内容，但是当我点击链接时它不显示它们
Vue基础
{{ pages[activePage].pageTitle }}
{{ pages[activePage].content }}
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
问题在于
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>