1，根据数据的length值来切换class类名，以此来变换样式。
<h2 class="letter-spacing1 activity-title" :class="members.length === 1 ? 'red':'gray'"></h2>
2，根据数据的length值来切换文字内容。
<b> {{ members.length === 1 ? "刷新平板撑世界纪录" : "挑战你的平板支撑世界纪录" }}</b>
3，当两个条件都为true的时候显示某元素
<span class="tip" v-if="content.identity == 1 && step == 1">选中队员参加运动项目，未选中为助阵团团员！</span>
4，当1个条件都为true的时候显示某元素
<span class="tip" v-if="headerData.num === 1">还没有其他团员报名，快点邀请吧~</span>
5，里面用到了vue 2.0的v-for、v-if、表单checkbox
<div class="actual-member fl" v-for="(mem, index) in project.mems">
// 用label将整个点击区域包裹起来。
<label :for='mem.id'>
// 用户的头像
<span class="member-item">
</span>
// 用户的姓名
<p class="white member-name">{{ mem.name }}</p>
<!-- 如果当前的身份是团长，并且还没有选队员，才显示下面的多选框 -->
<div v-if="content.identity === 1 && step == 1">
// 真正的checkbox透明度为0，隐藏起来，但是checkbox的点击区域为整个label标签范围，用户看到的只有勾选或未勾选的样式，但实际还是在点checkbox，所有勾选到的checkbox对应的id值都会存放在checkedNames中
<input type="checkbox" style="opacity: 0" :id='mem.id' v-model="checkedNames"
:value="mem.id" v-if="mem.role_id != 1">
// v-if="mem.role_id != 1" 用来判断这个用户是不是团长的身份，如果是团长的身份就不渲染这个checkbox。
<span v-if="mem.role_id == 1" class="green-checkbox"></span>
// 如果用户是团长身份，直接显示已勾选的样式
<span v-else :class="checkedNames.indexOf(mem.id) > -1 ? 'green-checkbox':'gray-checkbox'"></span>
// 显示勾选或未勾选的标签
</div>
</label>
</div>
6，三个条件都为true的时候才渲染
<button type="button" class="bg-gold white detail-btn"
v-if="content.identity == 1 && step == 1 && content.num >= 12"
:class="checkedNames.length === 12 ? '':'gray-btn'"
@click="submitMemberData">确认选择
</button>
7，通过判断$route.path来显示a链接
<router-link
v-if="$route.path !== '/time-entries/log-time'"
to="/time-entries/log-time"
class="btn btn-primary">
创建
</router-link>
-
v-if是vue的一个指令 -
$route.path是当前路由对象的路径，会被解析为绝对路径当 -
$route.path !=='/time-entries/log-time'为true是显示，false，为不显示。 - to 路由跳转地址
8，判断length值，切换显示或不显示
<p v-if="!plans.length"><strong>还没有任何计划</strong></p>
9，v-for循环，注意index的位置
<a class="list-group-item" v-for="(plan, index) in plans"></a>
v-for循环，注意参数顺序为(item,index) in items
10，img标签中src属性的渲染方式
<img :src="plan.avatar" />
-
:src属性，这个是vue的属性绑定简写v-bind可以缩写为: - 比如a标签的
href可以写为:href，并且在vue的指令里就一定不要写插值表达式了(:src={{xx}})，vue自己会去解析。
