点击切换,激活选中样式

需求:点击目标元素后,切换元素样式

解决:

1.data中增加需要激活样式的目标元素在兄弟元素中的索引,一般默认为0

data() {
    return {
      activeIndex : -1, // 0为默认选择第一个,-1为不选择
    };
  }

2.目标元素添加点击事件,并设置动态类名(进行三元运算判断)

  • 3.methods中定义handleTap(index)方法,获取点击目标元素的索引

    methods: {
         handleTap(index) {
            this.activeIndex = index;  // 把当前点击元素的index,赋值给activeIndex
         }
    }

    4.style中设置激活的样式类

     

    你可能感兴趣的:(vue,vue)