前端多个li标签点击切换🪓

文件上传

在项目中，我们经常会用到动态显示列表，点击切换文字背景样式的需求，为了方便学习，写下这篇博客，加深印象

以Vue为例，实现文字颜色切换

• 代码如下：

  data() {
    return {
      list: ['第一个', '第二个', '第三个'], // li标签的内容数组
      currentIndex: 0 // 当前选中的li标签索引
    }
  },
  methods: {
    changeColor(index) {
      this.currentIndex = index; // 点击时更新当前选中的索引

      // 切换恢复样式
      // setTimeout(() => {
      // 	this.currentIndex = null; // 清空当前选中的索引，恢复所有li标签的样式
      // }, 1000);
    }
  }