demand

There are five ICONS, only one of which can be “on” at the beginning. The control mouse can be “on”, but only one icon can be “on” at a time.

  • Achieve goals:

steps

Here is just another vUE based demo, mainly to express the implementation ideas, the rest of the code needs to be supplemented according to their own needs

1. Draw an icon

<img v-for="item in list" class="icon" :src="..." />
Copy the code
.icon{
    color: gray;
}
Copy the code
charts: ['chartA'.'chartB'.'chartC'.'chartD'.'chartE']
Copy the code

Effect:

2. Draw the effect after lighting

.icon-active{
    color: #3c4fe0;
}
Copy the code

Effect:

3. Bind click events

<img v-for="item in list" class="icon" @click="chartTypeChange(item)" :src="..." />
Copy the code
chartChoosed: 'chartA'.// Currently selected
charts: ['chartA'.'chartB'.'chartC'.'chartD'.'chartE']
chartTypeChange(choose){ // Click the event
    console.log(choose)
}
Copy the code

Effect:

  1. Bind the current active item and render its style
<img 
    v-for="item in list"
    :src="..."
    :class="chartChoosed === item ? 'icon-active' : 'icon'"
    @click="chartTypeChange(item)" 
/>
Copy the code

Note here:

  • Attribute name = “constant attribute value”
  • :+ attribute name = “variable attribute value” (yesV-bind: attribute nameThe abbreviation of)
chartChoosed: 'chartA'.// Currently selected
charts: ['chartA'.'chartB'.'chartC'.'chartD'.'chartE']
chartTypeChange(choose){ // Click the event
    this.chartChoosed = choose
}
Copy the code

Effect:

This is done