vue 2.0 常用基础知识点

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将整个点击区域包裹起来。    <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">           // 真正的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>