简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Selepas menggunakan kaedah @click.prevent dalam vue, halaman tidak memaparkan kandungan
P粉111927962
P粉111927962 2023-09-16 22:12:27
0
1
564

Bolehkah sesiapa mengetahui dari mana masalah itu mungkin datang? ? Saya tidak mendapat sebarang ralat, tetapi halaman tidak menunjukkan kandungan Saya cuba memaparkan kandungan halaman tanpa menavigasi ke halaman, tetapi apabila saya mengklik pada pautan ia tidak memaparkannya 

<!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>
P粉111927962
P粉111927962

membalas semua(1)
P粉627027031
P粉6270270312023-09-17 20:11:52 Tingkat 1

Masalahnya ialah activePage tidak responsif. Cipta ia sebagai ref untuk menjadikannya responsif kepada perubahan. 

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>
Suka +0
Tambah Balasan
Topik popular
Lagi>
Artikel popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！