如何动态控制样式

需求说明

• 通过点击 日 周 月 控制当前点击的项的样式，实现动态控制样式的效果
  
  

方法说明

• 将三个按钮设置为一个数组，通过 v-for 遍历展示，在每个 item 添加点击事件 selectCycle ，保留当前点击的索引值为 currentCycle ，通过 currentCycle === index 判断设置行内样式，设置当前点击的 item 的样式为 'background: rgba(24, 144, 255, 0.2);color: #1890FF;'

代码说明

//html
<template>
<div class="cycle">
            <div
              v-for="(item, index) in cycleList"
              :key="index"
              class="day"
              :style="
                currentCycle === index
                  ? 'background: rgba(24, 144, 255, 0.2);color: #1890FF;'
                  : ''
              "
              @click="selectCycle(index)"
            >
              {{ item.name }}
            </div>
          </div>
</template>
//javascript
<script>
export default {
  name: 'cycleSelect',
  data() {
    return {
      // 周期选择
      cycleList: [
        { class: 'day', name: '日' },
        { class: 'week', name: '周' },
        { class: 'month', name: '月' }
      ],
      currentCycle: 0
    }
  },
  methods: {
    // 选择周期（日、周、月）
    selectCycle(val) {
      this.currentCycle = val
    }
  }
}
</script>
//css
<style lang="scss" scoped>
		.cycle {
          display: flex;
        }
//基础样式
        .cycle > div {
          width: 34px;
          height: 26px;
          border-radius: 4px;
          background: rgba($color: #cccccc, $alpha: 0.2);
          margin-right: 8px;
          display: flex;
          justify-content: center;
          align-items: center;
        }
</style>

写在最后

记录使用到的一些方法，避免忘记，若有不足之处请多多指教