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

最新推荐文章于 2025-07-24 23:39:43 发布

原创最新推荐文章于 2025-07-24 23:39:43 发布 · 660 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#servlet #java #html

本文展示了如何在Vue2.js中使用动态class和v-if指令来实现页面交互。通过点击不同的配置选项（服务配置、网络配置、端口配置），相应组件根据v-if条件显示和隐藏，同时应用不同class实现高亮状态。这种方式增强了用户体验并优化了代码结构。

</div>

<div>

</div>

</div>

</div>

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

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

</el-collapse-item>

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

</el-collapse-item>

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

</el-collapse-item>

</el-collapse> -->

</div>

</template>

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>

.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>