vue样式 多个class添加与移出

vue样式 class添加与移出

//可进行多个判断 进行加类 与移出类名
//active,aeactive,active1,aeactive1 为类名
<span
                    class="nav"
                    :class="{active:oneactive==1,secactive:twoactive==2}"
                  >第一</span>
                  <span
                    class="nav"
                    :class="{active1:twoactive==1,secactive1:oneactive==2}"
                  >第二</span>

vue3使用

import { ref } from 'vue'
export default {
  setup () {
    const oneactive= ref(1)
    const twoactive= ref(1)
    return {oneactive,twoactive}
}
}
您可以通过给input添加一个事件监听器,当鼠标进入input区域时,改变其后面的div的背景颜色,当鼠标移出input区域时,再将其背景颜色恢复原状。以下是一个示例代码: HTML部分: ```html <div id="app"> <div v-for="(item, index) in items" :key="index"> <input type="text" @mouseover="changeBgColor(index, true)" @mouseout="changeBgColor(index, false)"> <div :class="{ 'bg-color': showBg && showIndex === index }"> {{ item }} </div> </div> </div> ``` Vue部分: ```javascript new Vue({ el: '#app', data: { items: ['item1', 'item2', 'item3'], // 待循环的数据 showBg: false, // 是否显示背景颜色 showIndex: null // 当前鼠标所在的input的下标 }, methods: { // 改变背景颜色的方法,index表示当前input的下标,isShow表示是否显示背景颜色 changeBgColor(index, isShow) { this.showBg = isShow; this.showIndex = index; } } }) ``` CSS部分: ```css .bg-color { background-color: #ccc; } ``` 在上面的示例代码中,我们通过遍历数据循环出多个input和对应的div,给input添加了两个事件监听器,当鼠标进入时,将showBg标记为true,并将showIndex赋值为当前input的下标;当鼠标移出时,将showBg标记为false,这样就可以在Vue中根据showBg和showIndex的值来决定是否显示div的背景颜色。同时我们还通过:class绑定了背景颜色样式,并在CSS中设置了该样式的背景颜色。 希望这个回答可以帮您解决问题,如果还有其他问题可以继续提问哦~
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值