vue点击伸展收缩切换效果

<template>
  <div id="app">
    <div
      class="item"
      v-for="(item, index) in dataList"
      :key='index'
      @click='shrink(item, index)'
    >
      <div class="title">{{ item.title }}</div>
      <div
        class="desc"
        v-if="item.openFlag"
      >{{ item.desc }}</div>
    </div>
  </div>
</template>

<style>
.item {
  border: 1px solid black;
}
</style>

<script>
export default {
  data() {
    return {
      dataList: [{
        title: '1. 58到家保洁师的优势有哪些？',
        desc: '高收入高保障，订单多不愁活，高额保险保障，手机接单多劳多得，就近派活也可抢单，真正家庭事业两相顾。',
        openFlag: true
      },{
        title: '2. 认证成为58到家保洁师的条件是什么？',
        desc: '只要您年龄在50岁以下，能熟练使用智能手机，会讲普通话，身体健康，勤劳、有服务意识，有无家政经验均可参加认证。',
        openFlag: false
      },{
        title: '3. 需要带什么来认证呢？',
        desc: '您需要携带身份证原件、智能手机、健康证、招商银行卡以及您在家政服务行业的相关证书到公司认证哦。',
        openFlag: false
      },{
        title: '4. 多少时间能工作呢？',
        desc: '很多保洁师通过专业培训考核，都能在一周内快速找到工作接单挣钱。',
        openFlag: false
      }]
    }
  },
  methods: {
    shrink(item, index) {
      // 重新整合要修改的数据
      const newValue = Object.assign(item, { openFlag: !item.openFlag })
      // this.$set改变 (要改变的数组、改变数组的下标、新值)
      this.$set(this.dataList, index, newValue)
    }
  }
}
</script>