vue 项目中 v-for渲染的对应card点击切换显示，且对应card加选中样式

1. 默认展示效果
2. 点击对应卡片：
   

<template>
  <Row :gutter="8" style="margin-top: 14px;clear: both;">
    <Col
      :xs="24"
      :sm="12"
      :md="8"
      :lg="4"
      v-for="(item, index) in curPageData"
      :key="index"
    >
      <Card style="text-align: center;" :class="active===index ? 'activeClass' : '' ">
        <div @click="showDemo(item, index)" :class="item.isShow ? 'display' : 'show'">
          {{ item.title }}
        </div>
        <div @click="showDemo(item, index)" v-show="item.isShow">
          {{ item.num }}
        </div>
      </Card>
    </Col>
  </Row>
</template>
<script>
export default {
  data() {
    return {
      active: 0,
      curPageData: [
        { title: 'card1', num: 1 },
        { title: 'card2', num: 2 },
        { title: 'card3', num: 3 },
        { title: 'card4', num: 4 },
      ]
    }
  },
  methods: {
    showDemo(item, index) {
      console.log(item, index)
      this.active = index
      if (!item.isShow) {
        this.$set(item, 'isShow', false)
        item.isShow = !item.isShow
      } else {
        item.isShow = !item.isShow
      }
    },
  },
  mounted() {
  },
}
</script>

<style scoped>
.show {
  display: inline-block;
}
.display {
  display: none;
}

.activeClass {
  box-shadow: 0 0 5px 0 skyblue;
}
</style>