Vue ElementUI Tab(標簽頁)是一個常用的 UI 組件,可以方便地實現頁面切換和內容展示。本文將介紹如何使用 Vue ElementUI Tab 組件。
首先,我們需要安裝 ElementUI。可以使用 npm 或 yarn 進行安裝:
npm install element-ui --save // 或者 yarn add element-ui
接著,在 Vue 項目中導入 ElementUI,然后在需要使用 Tab 的組件中引入 Tab 組件:
// 引入 ElementUI import Vue from 'vue'; import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI); // 引入 Tab 組件 import {Tabs,TabPane} from 'element-ui';
在頁面中使用 Tab 組件:
<template> <div> <el-tabs v-model="activeName" @tab-click="handleClick"> <el-tab-pane label="標簽一" name="1"> 標簽一的內容 </el-tab-pane> <el-tab-pane label="標簽二" name="2"> 標簽二的內容 </el-tab-pane> <el-tab-pane label="標簽三" name="3"> 標簽三的內容 </el-tab-pane> </el-tabs> </div> </template> <script> export default { data() { return { activeName: '1' } }, methods: { handleClick(tab, event) { console.log(tab, event); } } } </script>
使用 v-model 綁定選中的標簽頁的 name 屬性,使用 @tab-click 監聽標簽點擊事件,并傳入參數 tab 和 event。
以上就是使用 Vue ElementUI Tab 組件的基本方法。
上一篇c 如何生成json串
下一篇python 粘合劑語言