vue + element-ui tab切换

vue + element-ui tab切换
强烈推介IDEA2020.2破解激活,IntelliJ IDEA 注册码,2020.2 IDEA 激活码

1、安装element-ui

npm install element-ui --save

2、在main.js中引入element 和 css文件

复制代码

// 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/>'
})

复制代码

3、编写一个vue文件,这里我们命名为tabText.vue

a、使用element官方提供的api编写template

复制代码

<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部分

复制代码

<script>
    export default {
        name: 'HelloWorld',
        data() {
            return {
                //默认第一个选项卡
                activeName: "first",
            }
        }
    }
</script>

//activeName:默认显示那个tab。
//activeName:el-tabs组件双向绑定的值,activeName值的取值是要对应el-tab-pane标记的name值

复制代码

 4、成果展示

vue + element-ui tab切换  vue + element-ui tab切换

本文来源huayang183,由架构君转载发布,观点不代表Java架构师必看的立场,转载请标明来源出处:https://javajgs.com/archives/18789

发表评论