vue 点击按钮高亮,各个按钮互不影响

304 阅读1分钟

// html 看class和click就行 关键就是用到了index
          <div class="flex" v-for="(item, index) in serviceInstances" :key="item.id">
            <div class="serviceBtn flex" :class="{serviceBg: serviceActive.indexOf(index)>-1 }" @click="serviceDetailShow(index)">
              <img class="serviceIcon" src="@/assets/sql.png" />
              <p class="serviceName">{{item.name}}</p>
            </div>
          </div>


//js:在data里声明serviceActive: [],//方法
   serviceDetailShow (index) {
     let hash = this.serviceActive.indexOf(index) 
     if (hash > -1) {
        this.serviceActive.splice(hash, 1)
      } else {
        this.serviceActive.push(index)
      }
    },