vue中改变选中当前项的显示隐藏或者状态的方法

转自:http://blog.csdn.net/luckylqh/article/details/54584037

在vue中已经不像jq那样直接操作dom了,如果要指向当前选中项时,就不能再用jq的思路来做了,方法如下: 
例如这里写图片描述 
当指向一个状态的时候,只让指向的状态隐藏,其他项不变,如果项目中用了element-ui,那么操作起来会比较简单一些,这样设置:

v-if="(row.id == currentId&&row.auditState==0)?checkState:!checkState" @mouseover="statehidden(row.id)"
 
 
  • 1
  • 1

js中:

statehidden(id){
            this.currentId=id; 
        },
 
 
  • 1
  • 2
  • 3
  • 1
  • 2
  • 3

这种方法的思路是:鼠标指向某一项时,获取到某一项的id存在一个变量中,判断row.id==currentId,控制这个按钮显示隐藏就可以了,因为只有在鼠标指向某一项的时候才能拿到当前项的id,所以可以利用row.id==currentId来判断,这样就能轻松实现控制当前项的变化

Vue3实现轮播图并在滑动过程动态改变选中的样式,通常会结合Vue组件和指令(v-model)以及事件监听。以下是基本步骤: 1. **设置数据状态**:首先,在`data()`函数创建一个数组来存储轮播图的选及其对应的索引,例如 `items: [{ img: 'img1', active: false }, { img: 'img2', active: true }]`。 2. **组件模板**:在组件模板,遍历`items`,对于每个元素,可以使用`v-for`展示图片,并添加一个自定义指令来控制选中的样式。比如: ```html <div class="carousel"> <transition-group tag="div" :key="item.index"> <img v-for="(item, index) in items" :src="item.img" :key="index" :class="{ active: item.active }" @click="selectItem(index)" /> </transition-group> </div> ``` 3. **样式定义**:在CSS定义`.active`类的样式,如背景颜色、边框等: ```css .active { background-color: #ff0000; /* 红色作为示例 */ border: 2px solid red; } ``` 4. **选择方法**:创建一个`selectItem`方法,用于处理滑动的切换操作。当用户点击或通过其他方式切换到新的,更新数据并改变当前选中目的样式: ```javascript methods: { selectItem(index) { this.items.forEach((item, i) => { if (i === index) { this.$set(this.items, i, { ...item, active: true }); // 如果需要平移效果,可以使用`this.$refs.carousel.slide(index - currentIndex)`替换下面这行 // 直接改变active属性即可,因为过渡组会自动处理显示隐藏效果 this.items[index].active = !this.items[index].active; } else { this.items[i].active = false; } }); } } ``` 5. **实例化并绑定数据**:最后,将这个组件应用到实际页面上,传入你的数据: ```javascript new Vue({ el: '#app', data() { return { items: [ { img: 'img1', active: false }, { img: 'img2', active: true }, // 添加更多图片... ] } } // 其他Vue生命周期钩子和配置... }) ``` 当你完成上述设置后,轮播图在滑动就会实更改选中的样式了。记得检查是否安装了Vue CLI或其他构建工具来管理你的目。如果有疑问,可以尝试在浏览器的开发者工具查看组件状态变化和DOM渲染。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值