vue之通过渲染的多个li标签点击选中添加样式,再次点击取消样式。(不需要使用jq)

vue之通过渲染的多个li标签点击选中添加样式,再次点击取消样式。

在这里插入图片描述
先来描述一下这个需求。动态的渲染后端返回的评分问题,这个评分题的下边可以添加这些标签,这些标签可以多选。然后要实现的就是点击这些标签改变他的背景颜色,再次点击变回原样。
首先我们要做的就是让每一个标签都有一个状态,就是让后端以数组对象的形式[{bq:‘第一个标签’,flag:false}]的形式给你返回数据。如果他不想改只给你一个标签数组,你自己生成一个数组对象。我用的就是这种方式。
此时的newArr就是一个数组对象,每一个标签都有了一个初始状态。
在标签上添加
在标签上添加点击方法,不要忘了把标签的值和下标传递过来。
在这里插入图片描述
遍历标签的flag属性,如果这个标签的初始状态为false,就拿到这个问题的节点b,再拿到当前这个问题下被点击的标签的节点,然后就可以改变他的背景颜色了。

如果你只是单纯的想改变标签的颜色,上图被框起来的两块就不需要写了,那两个部分是为了把选中状态的标签添加到一个空数组,传递给后端的。
好了,这样就完成了多个题目下标签的颜色改变。

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以使用 Vue 的 v-bind:class 指令实现这个效果。具体实现步骤如下: 1. 在 data 中定义一个变量,用于保存当前被选中li 的索引: ``` data() { return { selectedIndex: -1, // 初始值为 -1,表示没有任何 li选中 ... } } ``` 2. 在模板中遍历 li,为每个 li 绑定一个点击事件,同时根据当前被选中的索引,为 li 动态添加类名: ``` <ul> <li v-for="(item, index) in list" :key="index" :class="{ active: selectedIndex === index }" @click="handleClick(index)"> {{ item }} </li> </ul> ``` 其中,active 是用来表示选中状态的类名,handleClick 是点击事件的处理函数,它接收一个参数 index,表示当前点击li 的索引。 3. 实现 handleClick 方法,根据当前被选中的索引,更新 selectedIndex 的值: ``` methods: { handleClick(index) { if (this.selectedIndex === index) { // 如果当前点击的是已选中li,则取消选中状态 this.selectedIndex = -1; } else { // 如果当前点击的是未选中li,则将其设为选中状态 this.selectedIndex = index; } }, ... } ``` 这样,当用户点击一个 li 时,会先判断它是否已经被选中,如果是,则取消选中状态;如果不是,则将其设为选中状态,同时取消之前选中li选中状态。 最后,为选中状态的 li 添加样式即可,比如: ``` <style> .active { background-color: #ccc; } </style> ``` 这样,用户点击一个 li 时,它的背景色会变成灰色,再次点击时会取消选中状态,背景色变回原来的颜色。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值