Vue 通过for循环出来的标签,只改变其中的某一个样式

场景:项目中点击表格的某一个内容,按照该内容的属性进行排序,排序时需要改变排序的样式

 

<tr>
   <th v-for="(item,i) in tableHeadData" @click="decChange(item.value,i)" ref="decChange" class="sortable both" :value='item.value' :key="i">{{item.name}}</th>
</tr>

decChange(val,i) {
  //将所有样式重置
  this.$refs.decChange.map(item=>{
  return item.className = 'sortable both'
 })
  //给点击的标签添加一个新的类名
this.$refs.decChange[i].className =  this.$refs.decChange[i].className = 'sortable both'+' desc'
               

主要思想,给点击的标签添加一个新的类名

  • 1
    点赞
  • 18
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
]=time[0]/10;SMG[7]=time[0]%10;break; case 3:SMG[0]=time[2]/10;SMG[1]=time[2]%10; SMG[3]=time[1]/10;您可以使用以下步骤来实现在点击van-grid中的一个格子时改变其背景色: 1. 首SMG[4]=time[1]%10;break; } } if((time[0]==clock[0])&&(time先,在您的Vue组件中引入van-grid组件,并在template中使用van-grid标签创建一个格子列表。 [1]==clock[1])&&(time[2]==clock[2])) { ledenable=1; } if2. 为每个格子设置一个唯一的标识符,例如使用index作为key。 3. 在data中(ledenable==1) { P2=0X80;P0=led; P2=0Xa0定义一个名为selected的变量,用于存储当前选中格子的标识符。 4. 使用@click事件监听;P0=buzzer; } else { P2=0X80;P0=0xff; P器来捕获格子的点击事件,并将被点击格子的标识符赋值给selected变量。 5. 在2=0Xa0;P0=0x00; } SMG_output(); Dkey_scan(); } } 每个格子的样式中使用动态绑定class属性,根据当前格子是否被选中来设置背景``` 这是主函数的实现。在循环中根据SMG_mode的值,显示当前时间或闹钟时间色。 下面是一个示例代码: ```html <template> <van-grid :column-num="3"> <van。如果当前时间与闹钟时间相同,则设置ledenable为1,即使能LED。根据ledenable的值,-grid-item v-for="(item, index) in gridItems" :key="index" :class="{ 'selected': selected控制LED和蜂鸣器的状态。最后调用SMG_output()函数显示数码管内容,调用Dkey === index }" @click="selectGrid(index)" > {{ item }} </van-grid-item> </van-grid> _scan()函数扫描按键。 这段代码的功能是实现一个时钟显示程序,可以显示当前时间、设置</template> <script> export default { data() { return { gridItems: ['格子1', '格子2',闹钟时间,并在闹钟时间到达时点亮LED和蜂鸣器。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值