1,根据数据的length值来切换class类名,以此来变换样式。http://www.jianshu.com/p/1707d808448b
<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 :for='mem.id'>
<span class="member-item">
![](mem.avatar)
</span>
<p class="white member-name">{{ mem.name }}</p>
<!-- 如果当前的身份是团长,并且还没有选队员,才显示下面的多选框 -->
<div v-if="content.identity === 1 && step == 1">
<input type="checkbox" style="opacity: 0" :id='mem.id' v-model="checkedNames"
:value="mem.id" v-if="mem.role_id != 1">
<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>