小技巧系列 — 如何实现类似 Radio 的效果

需求

有五个图标，初始时只能有一个“亮着”，控制鼠标可以“点亮”，但同时只能一个“亮着”

• 实现目标：

步骤

1. 画出图标

<img v-for="item in list" class="icon" />
复制代码

.icon{
    color: gray;
}
复制代码

charts: ['chartA','chartB','chartC','chartD','chartE']
复制代码

效果：

2. 绘制出点亮之后的效果

.icon-active{
    color: #3c4fe0;
}
复制代码

效果：

3. 绑定点击事件

<img v-for="item in list" class="icon" @click="chartTypeChange(item)" />
复制代码

chartChoosed: 'chartA', // 当前选中项
charts: ['chartA','chartB','chartC','chartD','chartE']
chartTypeChange(choose){ // 点击事件
    console.log(choose)
}
复制代码

效果：

4. 绑定当前活跃项并渲染其样式

<img 
    v-for="item in list"
    :class="chartChoosed === item ? 'icon-active' : 'icon'"
    @click="chartTypeChange(item)" 
/>
复制代码

这里注意的是：

• 属性名称 = “不变的属性值”
• : + 属性名称 = “会变化的属性值”（是v-bind:属性名称的缩写）

chartChoosed: 'chartA', // 当前选中项
charts: ['chartA','chartB','chartC','chartD','chartE']
chartTypeChange(choose){ // 点击事件
    this.chartChoosed = choose
}
复制代码

效果：

至此已完成