【Vue3小试牛刀】--遍历渲染的数据,处理单独选中的效果(以选择月份为例)

333 阅读1分钟

想要实现的效果: image.png 当选中六月时,其他月份颜色不变,同时再次点击六月,选中效果消失。

分析:单独处理选中的效果,等于每条数据的处理不会影响其他数据,因此数据结构可以为:

image.png

一般实际项目中,数据是请求后端接口返回的,因此不一定有我们需要的参数,这种情况下,可以使用Array原型上的方法 -- map,去对后端数据进行处理,加上需要的参数即可, 举例:

image.png

接下来就是定义点击事件,比较简单,直接上代码:

image.png

因为只有选中和未选中状态,因此使用布尔值取反,typeId=false-----type='default'(未选中),typeId=true-----type='info'(选中)

在这种使用navie-ui框架中button按钮的type类型模拟选中效果,html代码如下:

image.png

按钮点击之后,type随着typeId的变化而发生响应式变化,从而实现需求中的功能。