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>