vue + element-ui 製做tab切換(適用於單頁切換不一樣標記顯示不一樣內容)

本篇文章使用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

  

相關文章
相關標籤/搜索