vue 2.0 常用基础知识点
来源:互联网 发布:webstorm 调试js 编辑:程序博客网 时间:2024/06/07 14:17
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>
0 0
- vue 2.0 常用基础知识点
- vue 2.0 常用基础知识点
- vue-router 2.0 常用基础知识点之router-link
- vue-router 2.0 常用基础知识点之导航钩子
- vue-router 2.0 常用基础知识点之router.push()
- vue-router 2.0 常用基础知识点之router.push()
- vue-router 2.0 常用基础知识点之导航钩子
- vue-router 2.0 常用基础知识点之router-link
- vue-router 2.0 常用基础知识点之router.push()
- vue-router 2.0 常用基础知识点之router.push()
- vue-router 2.0 常用基础知识点之导航钩子
- vue-router 2.0 常用基础知识点之router.push()
- vue-router 2.0 常用基础知识点之导航钩子
- Vue常用知识点
- vue中常用知识点基本用法
- Java---常用基础面试知识点
- C++常用知识点汇总(基础)
- vue知识点
- 大多数人对Redis的误解
- iOS 应用内购买(In-App Purchase)之协议、税务和银行业务
- 如何定位CPU占用过高问题
- STL源码剖析笔记-6算法(6.4 基本算法)
- 遍历数据元素作为参数发送ajax jsonp请求
- vue 2.0 常用基础知识点
- 关于httpClient系列包找不到问题
- SparseArray和ArrayMap
- linux 命令终端显示-bash-4.2#解决方法
- 安装hive
- 大白话系列之C#委托与事件讲解(一)
- 安装cuda和libfreenect2的坑
- Golang:每天零点定时执行操作
- 快速求素数模板