鸿蒙JS UI的Hml语法技巧，hml中实现多列表的方式

由于没有web基础，不懂html和js。需要从基础学起。

刚刚学到在hml中实现多列表的方式，记录一下

<div class="container">
    <div class="card-container" for="item in imageCards" show="{{ item.isShow }}">
        <div class="text-container">
            <text class="text-operation">{{ contentTitle }}</text>
            <text class="text-description">{{ item.description }}</text>
        </div>
        <image class="{{ item.classType }}" src="{{ item.src }}" onclick="changeHookState({{ item.eventType }})"/>
    </div>
</div>

对应的JS

import CommonConstants from '../../common/constants/commonConstants';

export default {
  data: {
    contentTitle: '',
    hook: true,
    imageCards: [
      {
        src: '/common/images/ic_heart_rate.png',
        classType: 'img-normal',
        eventType: 'touch',
        description: '',
        isShow: true,
      },
      {
        src: '/common/images/ic_hook.png',
        eventType: 'click',
        classType: 'img-normal',
        description: '',
        isShow: false,
      },
    ],
    durationTimeArray: [CommonConstants.DURATION_TIME, CommonConstants.DURATION_TIME],
    arrow: CommonConstants.ARROW_FRAMES,
    collapse: CommonConstants.COLLAPSE_FRAMES
  },
  onInit() {
    this.contentTitle = this.$t('strings.content_title');
    this.imageCards[0].description = this.$t('strings.normal_description');
    this.imageCards[1].description = this.$t('strings.select_description');
  },
  changeHookState(eventType) {
    if (eventType === 'touch') {
      return;
    }
    if (this.hook) {
      this.imageCards[1].src = '/common/images/ic_fork.png';
      this.hook = false;
    } else {
      this.imageCards[1].src = '/common/images/ic_hook.png';
      this.hook = true;
    }
  },
}