前端代码心得基础篇（一）

1.Active.vue

<template>
  <view class="Active-box_wrapper">
    <view class="item" v-for="(v, idx) in data" :key="idx" @click="subActive(v, true)">
      <image :src="localImg.activity.war" class="img-arr" v-if="v.status == '未开始'"></image>
      <image :src="localImg.activity.ing" class="img-arr" v-if="v.status == '进行中'"></image>
      <image :src="localImg.activity.end" class="img-arr" v-if="v.status == '已结束'"></image>
      <view class="left">
        <image :src="v.imageUrl" class="img"></image>
      </view>
      <view class="right">
        <view class="title">{{v.title}}</view>
        <view class="sub"><u-icon name="map"></u-icon>{{v.address}}</view>
        <view class="time"><u-icon name="clock"></u-icon>{{dateFormat(new Date(v.beginTime))}}</view>
        <button type="primary" size="mini" class="btn" @click.stop="subActive(v, false)">报名</button>
        <button type="primary" size="mini" class="btn end" v-if="v.status == '已结束'"  @click.stop>报名</button>
      </view>
    </view>
  </view>
</template>

代码讲解：

1. @click=“subActive(v, true)”
   点击跳到活动详情页

2. @click.stop=“subActive(v, false)”
   点击跳到活动报名页，运用.stop的目的是阻止冒泡事件的发生

3. v-if=“v.status == ‘未开始’”
   表示三种不同的状态

  <view class="time"><u-icon name="clock"></u-icon>{{dateFormat(new Date(v.beginTime))}}</view>

此处后台传的时间字段是Date类型，前台拿到的是String类型，因此前端可以用dateFormat日期格式化函数，可以穿时间戳或者new date()。

 <button type="primary" size="mini" class="btn" @click.stop="subActive(v, false)">报名</button>
 <button type="primary" size="mini" class="btn end" v-if="v.status == '已结束'" @click.stop>报名</button>

这段的逻辑就是：写了两个button，刚开始以为会出来两个，但是要注意它加了v-if这个条件，条件满足了才回显示出来。