vue 2.0 常用基础知识点

1，根据数据的length值来切换class类名，以此来变换样式。

2，根据数据的length值来切换文字内容。

 {{ members.length === 1 ? "刷新平板撑世界纪录" : "挑战你的平板支撑世界纪录"  }}

3，当两个条件都为true的时候显示某元素

选中队员参加运动项目，未选中为助阵团团员！

4，当1个条件都为true的时候显示某元素

还没有其他团员报名，快点邀请吧~

5，里面用到了vue 2.0的v-for、v-if、表单checkbox

    // 用label将整个点击区域包裹起来。
    
       // 用户的头像
       
          ![](mem.avatar)
      
      // 用户的姓名
      
{{ mem.name }}
      
      

           // 真正的checkbox透明度为0，隐藏起来，但是checkbox的点击区域为整个label标签范围，用户看到的只有勾选或未勾选的样式，但实际还是在点checkbox，所有勾选到的checkbox对应的id值都会存放在checkedNames中
           
          // v-if="mem.role_id != 1" 用来判断这个用户是不是团长的身份，如果是团长的身份就不渲染这个checkbox。
      
           
           // 如果用户是团长身份，直接显示已勾选的样式
         
           
           // 显示勾选或未勾选的标签
      
  

6，三个条件都为true的时候才渲染

 确认选择

7，通过判断$route.path来显示a链接

    创建

• v-if是vue的一个指令
• $route.path是当前路由对象的路径，会被解析为绝对路径当
• $route.path !=='/time-entries/log-time'为true是显示，false，为不显示。
• to 路由跳转地址

8，判断length值，切换显示或不显示

还没有任何计划

9，v-for循环，注意index的位置

v-for循环，注意参数顺序为(item,index) in items

10，img标签中src属性的渲染方式

• :src属性，这个是vue的属性绑定简写v-bind可以缩写为:
• 比如a标签的href可以写为:href，并且在vue的指令里就一定不要写插值表达式了(:src={{xx}})，vue自己会去解析。