vue2.j 动态class、v-if 活学活用

<template>

  <div class="cfg-page-con poi">

    <div class="page-inline">

      <div class="page-bestinline">

        <div class="layout">

          <div class="page-upper">

            <div class="page" :class="{'active':isActive}" style="width:65px" @click="a">服务配置</div>

            <div class="page" :class="{'active':isActive1}" style="width:65px" @click="b">网络配置</div>

            <div class="page" :class="{'active':isActive2}" style="width:65px" @click="c">端口配置</div>

          </div>

          <div>

            <div v-if="show">

              <ServerCfg></ServerCfg>

            </div>

            <div v-if="show1">

              <NetCfg></NetCfg>

            </div>

            <div v-if="show2">

              <PortCfg></PortCfg>

            </div>

          </div>

        </div>

        <img src="@/assets/img/fire-saver.jpg" style="margin-top:90px" class="function-img" alt="">

        <!-- <el-collapse v-model="activeNames" @change="handleChange" accordion>

          <el-collapse-item class="serve"  title="服务配置" name="1">

            <ServerCfg></ServerCfg>

          </el-collapse-item>

          <el-collapse-item class="bottom" title="网络配置" name="2">

            <NetCfg></NetCfg>

          </el-collapse-item>

          <el-collapse-item title="端口配置" name="3">

            <PortCfg></PortCfg>

          </el-collapse-item>

        </el-collapse> -->

      </div>

    </div>

  </div>

</template>

<script>

import ServerCfg from './ServerCfg'

import NetCfg from './NetCfg'

import PortCfg from './PortCfg'

import PwdModify from './PwdModify'

import FireCfg from './FireCfg'

export default {

  name: 'index',

  components: {

    FireCfg,

    ServerCfg: ServerCfg,

    NetCfg: NetCfg,

    PortCfg: PortCfg,

    PwdModify: PwdModify

  },

  data() {

    return {

      activeNames: ['1'],

      fireVer: '消防配置 ',

      show: true,

      show1: false,

      show2: false,

      isActive: true,

      isActive1: false,

      isActive2: false

    }

  },

  methods: {

    handleChange(val) {

      console.log(val)

    },

    changedFire(val) {

      this.fireVer = val

    },

    a() {

      this.show = true

      this.show1 = false

      this.show2 = false

      this.isActive = true

      this.isActive1 = false

      this.isActive2 = false

    },

    b() {

      this.show = false

      this.show1 = true

      this.show2 = false

      this.isActive = false

      this.isActive1 = true

      this.isActive2 = false

    },

    c() {

      this.show = false

      this.show1 = false

      this.show2 = true

      this.isActive = false

      this.isActive1 = false

      this.isActive2 = true

    }

  }

}

</script>

<style scoped>

.cfg-page-con {

 

  overflow-x: hidden;

  overflow-y: auto;

}

::v-deep .el-collapse-item__header.is-active {

  border-bottom: 1px solid #ebeef5;

}

::v-deep .el-collapse-item__wrap {

  border: none;

}

.page-inline {

  background-color: #fff;

  border-radius: 15px;

  margin-top: 15px;

}

.page-bestinline {

  padding: 20px;

}

.bottom {

  margin-bottom: 10px;

}

.left-serve {

  font-size: 16px;

  color: black;

  margin-top: 20px;

}

.layout {

  display: flex;

  /* justify-content: center; */

}

.page-upper{

 cursor: pointer;

}

.page {

  padding: 3px;

  width: 10%;

  font-size: 16px;

  color: black;

  margin-top: 10px;

  background-color: #fff;

}

.active {

  color: rgba(0, 0, 0, 0.863);

  font-size: bold;

    border-bottom: 2px solid #4BA0FC;

}

.active:hover {

  color: #4BA0FC;

  font-size: bold;

    border-bottom: 2px solid #4BA0FC;

}

body{

  cursor: pointer;

}

.poi{

  cursor: pointer;

}

</style>