如何使用Vue實現側邊欄特效-Vue.js-PHP中文網

如何使用Vue實現側邊欄特效

PHPz

發布： 2023-09-19 14:00:52

原創

976 人瀏覽過

如何使用Vue實現側邊欄特效

Vue是一款流行的JavaScript框架，它的簡單易用和靈活性使開發人員能夠快速建立交互性強的單頁面應用程式。在這篇文章中，我們將學習如何使用Vue來實現一個常見的側邊欄特效，同時提供具體的程式碼範例幫助我們更好地理解。

建立Vue專案

首先，我們需要建立一個Vue專案。可以使用Vue提供的Vue CLI（命令列介面），它能夠快速產生一個基本的Vue專案結構。

開啟終端，並在專案所在的目錄中輸入以下命令：

$ vue create sidebar-animation

登入後複製

然後依照提示進行選擇所需的設定。

建立元件

接下來，我們需要建立兩個元件，一個是側邊欄元件，另一個是主內容元件。

在src資料夾下建立兩個檔案：Sidebar.vue和MainContent.vue。

Sidebar.vue程式碼：

<template>
  <div class="sidebar">
    <ul>
      <li v-for="item in menuItems" :key="item.id" @click="selectItem(item)">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menuItems: [
        { id: 1, name: "Home" },
        { id: 2, name: "About" },
        { id: 3, name: "Contact" },
      ],
    };
  },
  methods: {
    selectItem(item) {
      // 在这里可以触发对应的路由跳转或者显示相应的内容
      console.log(item.name);
    },
  },
};
</script>

<style scoped>
.sidebar {
  width: 200px;
  height: 100vh;
  background-color: #f0f0f0;
  padding: 10px;
}

ul {
  list-style-type: none;
}

li {
  margin-bottom: 10px;
  cursor: pointer;
}
</style>

登入後複製

MainContent.vue程式碼：

<template>
  <div class="main-content">
    <h1>{{ selectedItem }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedItem: "",
    };
  },
};
</script>

<style scoped>
.main-content {
  padding: 10px;
}
</style>

登入後複製

在這裡，我們建立了一個簡單的側邊欄元件和一個主內容元件。側邊欄元件中定義了一個選單項目數組，並透過v-for指令將其渲染為一個個的li元素。點擊每個選單項目時，透過綁定的click事件觸發selectItem方法，並將選取的選單項目傳遞過去。主內容元件中則展示了選取的選單項目名稱。

使用元件

在App.vue中使用剛才建立的兩個元件。

<template>
  <div id="app">
    <Sidebar />
    <MainContent />
  </div>
</template>

<script>
import Sidebar from "./components/Sidebar.vue";
import MainContent from "./components/MainContent.vue";

export default {
  components: {
    Sidebar,
    MainContent,
  },
};
</script>

<style>
#app {
  display: flex;
  height: 100vh;
}
</style>

登入後複製

這裡我們將Sidebar元件和MainContent元件都引入，並在模板中使用這兩個元件。