本篇文章使用vue結合element開發tab切換單頁不一樣的標記顯示不一樣的內容。css
一、安裝element-uivue
npm install element-ui --save
二、在main.js中引入element 和 css文件webpack
// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' import router from './router' //引入element-ui import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' //使用element-ui Vue.use(ElementUI) Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', router, components: { App }, template: '<App/>' })
三、編寫一個vue文件,這裏咱們命名爲tabText.vueweb
a、使用element官方提供的api編寫templatenpm
<template> <div class="hello"> <el-tabs v-model="activeName"> <el-tab-pane label="tab1" name="first" :key="'first'"> <div style="background: yellow; display: inline"> tab1內容 tab1內容 tab1內容 </div> </el-tab-pane> <el-tab-pane label="tab2" name="second" :key="'second'"> <div style="background: green; display: inline"> tab2內容 tab2內容 tab2內容 </div> </el-tab-pane> </el-tabs> <!-- 註釋
label:選項卡顯示的title
name:與選項卡綁定的activeName對應的標識符,表示選項卡的別名
--> </div> </template>
b、script部分element-ui
<script> export default { name: 'HelloWorld', data() { return { //默認第一個選項卡 activeName: "first", } } } </script>
//activeName:默認顯示那個tab。
//activeName:el-tabs組件雙向綁定的值,activeName值的取值是要對應el-tab-pane標記的name值
四、成果展現api