vue中点击按钮添加样式

最新推荐文章于 2024-06-30 11:06:07 发布

小小前端不开心

最新推荐文章于 2024-06-30 11:06:07 发布

阅读量8.1k

点赞数 1

文章标签： vue

本文链接：https://blog.csdn.net/hum1108/article/details/111480132

版权

这篇博客主要介绍了在Vue项目中如何实现在遍历元素上点击事件，动态地添加和移除样式。首先，通过示例1展示了遍历列表元素时，点击按钮添加样式的实现方式，接着探讨了静态数据的情况，包括点击不改变样式的处理和点击后样式发生变化的处理，分别给出了对应的HTML、JavaScript和CSS代码片段。

摘要由CSDN通过智能技术生成

此文章只是用于记录

1、遍历的元素在点击时添加样式
html

<div class="midadd">
  <template v-for="(item, index) in knowTypelist">
    <div
      class="mid"
      :key="item.id"
      @click="change(index)"
      :class="{ active: index == number, activ: index != number }"
    >
      <div class="right" @click="showPopup(item.id,index)">
        <p class="projectlist">{
   {
    item.name }}</p>
      </div>
    </div>
  </template>
</div>