1.2.4 v-if和v-for

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF‐8">

<title>Document</title>

<script src="/js/vue/vue.min.js"></script>

</head>

<body>

<div id="app">

<ul>

<!‐‐只显示偶数行‐‐>

<li v‐for="(item,index) in list" :key="index" v‐if="index % 2==0">{{index}}‐{{item}}

</li>

<li v‐for ="(value,key) in user">{{key}}‐{{value}}</li>

<li v‐for="(item,index) in userlist" :key="item.user.uname">

<div v‐if="item.user.uname=='heima'" style="background: chartreuse"><!‐‐名称为heima的

加背景色‐‐>

{{index}}‐{{item.user.uname}}‐{{item.user.age}}

</div>

<div v‐else="">

{{index}}‐{{item.user.uname}}‐{{item.user.age}}

</div>

</li>

</ul>

</div>

</body>

<script>

new Vue({

el:'#app',

data:{

list:[1,2,3,4,4],

user:{uname:'itcast',age:10},

userlist:[

{ user:{uname:'itcast',age:10}},

{ user:{uname:'heima',age:11}}

]

}

});

</script>

</html>

新建页面03

v-for的语法格式: () in list 

:key 指定数组的主键。

去除数组的下标和项目

刷新看到效果

参数值不是固定的 可以随意起名

v-if

偶数显示 除以2 取余数

循环另外集合

遍历键值对象集合

满足if条件 显示绿色背景色

只有满足条件的才会显示

v-else

阶段5 3.微服务项目【学成在线】_day02 CMS前端开发_08-vuejs研究-vuejs基础-v-if和v-for指令的更多相关文章

  1. 微服务项目开发学成在线_day02 CMS前端开发

    1 Vue.js与Webpack研究 开发版的浏览器:https://www.google.cn/intl/zh-CN/chrome/dev/ 前端的开发框架:微服务项目开发学成在线_Vue.js与W ...

  2. 阶段5 3.微服务项目【学成在线】_day04 页面静态化_16-页面静态化-模板管理-模板制作

    这是轮播图的原始文件 运行门户需要把 nginx启动起来 单独运行轮播图.把里面的css的引用都加上网址的url 这就是单独访问到的轮播图的效果 轮播图模板的地址: 阶段5 3.微服务项目[学成在线] ...

  3. 阶段5 3.微服务项目【学成在线】_day02 CMS前端开发_16-CMS前端工程创建-导入系统管理前端工程

    提供了基于脚手架封装好的前端工程 H:\BaiDu\黑马传智JavaEE57期 2019最新基础+就业+在职加薪\阶段5 3.微服务项目[学成在线]·\day02 CMS前端开发\资料\xc-ui-p ...

  4. 阶段5 3.微服务项目【学成在线】_day16 Spring Security Oauth2_03-用户认证技术方案-Oauth2协议

    2.2 Oauth2认证 2.2.1 Oauth2认证流程 第三方认证技术方案最主要是解决认证协议的通用标准 问题,因为要实现 跨系统认证,各系统之间要遵循一定的 接口协议. OAUTH协议为用户资源 ...

  5. 阶段5 3.微服务项目【学成在线】_day16 Spring Security Oauth2_01-用户认证需求分析

    1.1 用户认证与授权 截至目前,项目已经完成了在线学习功能,用户通过在线学习页面点播视频进行学习.如何去记录学生的学习过程 呢?要想掌握学生的学习情况就需要知道用户的身份信息,记录哪个用户在什么时间 ...

  6. 阶段5 3.微服务项目【学成在线】_day09 课程预览 Eureka Feign_05-Feign远程调用-客户端负载均衡介绍

    2 Feign远程调用 在前后端分离架构中,服务层被拆分成了很多的微服务,服务与服务之间难免发生交互,比如:课程发布需要调用 CMS服务生成课程静态化页面,本节研究微服务远程调用所使用的技术. 下图是 ...

  7. 阶段5 3.微服务项目【学成在线】_day09 课程预览 Eureka Feign_02-Eureka注册中心-搭建Eureka单机环境

    我们先搭建单机环境 govern是治理的意思, 这样就把工程创建好了 创建包 创建SpringBoot的启动类. 在父工程里面已经确定了Spring Cloud的版本了.相当于锁定了版本 接下里只需要 ...

  8. 阶段5 3.微服务项目【学成在线】_day09 课程预览 Eureka Feign_04-Eureka注册中心-将服务注册到Eureka Server

    cms相当于客户端 配置客户端的信息 后面加逗号分隔开 50102表示向两台eureka服务上报服务,如果有一台死掉了 那么还可以上另外的一台去注册服务 直接把ip注册到eureka 启动类加注解 重 ...

  9. 阶段5 3.微服务项目【学成在线】_day09 课程预览 Eureka Feign_01-Eureka注册中心-Eureka介绍

    1 Eureka注册中心 1.1 需求分析 在前后端分离架构中,服务层被拆分成了很多的微服务,微服务的信息如何管理?Spring Cloud中提供服务注册中 心来管理微服务信息. 为什么 要用注册中心 ...

  10. 阶段5 3.微服务项目【学成在线】_day18 用户授权_03-方法授权-jwt令牌包含权限

    修改认证服务的UserDetailServiceImpl类,下边的代码中 permissionList列表中存放了用户的权限, 并且将权限标识按照中间使用逗号分隔的语法组成一个字符串,最终提供给Spr ...

随机推荐

  1. Python break, continue, pass 语句

    今天心情好好,来record一下,continue break pass 语句 1.break 与 continue break 语句可以跳出 for 和 while 的循环体.如果你从 for 或 ...

  2. Java集合--ArrayList出现同步问题的原因

    1 fail-fast简介 fail-fast 机制是java集合(Collection)中的一种错误机制.当多个线程对同一个集合的内容进行操作时,就可能会产生fail-fast事件.例如:当某一个线 ...

  3. halcon基础数据类型详解

    #if defined(__CHAR_UNSIGNED__) || defined(__sgi) #define INT1 signed char /* integer, signed 1 Byte ...

  4. jQuery于js的区别和联系

    一.什么是jQuery jQuery 是 js 的一个库,封装了我们开发过程中常用的一些功能,方便我们调用,提高开发效率. js库是把我们常用的功能放到一个单独的文件中,我们用的时候,直接引用到页面里 ...

  5. C语言学习系列（六）存储类

    一.C存储类 存储类定义C程序中变量/函数的范围(可见性)和生命周期.这些说明符放置在他们所修饰的类型之前.for example:auto.register.static.extern. (一).a ...

  6. Python--编码的疑惑

    XML语法分析器在处理的时候,使用的是Unicode字符串,并且将其返回.Unicode可以处理特殊字符,但是如果将Unicode字符串转换为普通字符串,就会引发异常,比如Print, >> ...

  7. P4160 [SCOI2009]生日快乐 搜索

    思路:无脑搜索 提交:1次 题解: 大力搜索,枚举每个状态\((x,y,l)\)(\(x\)指分配到的长(可能比\(y\)要短),\(y\)指分配到的宽(可能比\(x\)要长),\(l\)指剩余切的次 ...

  8. Linux下的电路设计辅助软件

    造冰箱的大熊猫@cnblogs 2019/8/21 最近调研了以下开源的电路设计辅助软件(EDA),汇总如下 1.gEDA 官网:geda-project.org 老牌的开源EDA软件,诞生于上世纪9 ...

  9. qt 给父窗体设置样式不影响子控件样式以及子控件设置透明

    1.父窗体样式不生效? this->setAttribute(Qt::WA_StyledBackground); 2.父窗样式体影响子控件? this->setStyleSheet(&qu ...

  10. while练习

    题目:企业发放的奖金根据利润提成.利润(I)低于或等于10万元时,奖金可提10%:利润高于10万元,低于20万元时,低于10万元的部分按10%提成,高于10万元的部分,可提成7.5%:20万到40万之 ...