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. idou老师教你学Istio11 : 如何用Istio实现流量熔断

    在之前的最佳实践中,已经带大家通过一系列的实践任务领略了Istio的无穷魅力.今天,将向大家介绍如何用Istio实现流量熔断. 熔断机制是创建弹性微服务应用程序的重要模式.熔断可以帮助您自由控制故障影 ...

  2. YOLO---近段时间的练习目标

    YOLO---近段时间的练习目标 yolo(darknet)官方主页:https://pjreddie.com/darknet/yolo/   和在学校时用的不太一样了,有更新了- 还有一个常用版本: ...

  3. Array 和 ArrayList 有何区别？（未完成）

    Array 和 ArrayList 有何区别?(未完成)

  4. 洛谷P5002 专心OI - 找祖先

    题目概括 题目描述 这个游戏会给出你一棵树,这棵树有\(N\)个节点,根结点是\(R\),系统会选中\(M\)个点\(P_1,P_2...P_M\). 要Imakf回答有多少组点对\((u_i,v_i ...

  5. mysql查询表中最后一条记录

    查询全部的记录:            select * from test_limit ; 查第一条记录:             select * from test_limit limit 1; ...

  6. 多次读取HttpServletRequest的inputstream方法 问题解决

    原因:我要收集所有来自前台请求的参数信息,无论在任何地方的.当前请求参数都是json格式,都写在httpservlet的body中.这个只能通过流进行获取.然后问题来了,HttpServletRequ ...

  7. [SaSS] Using Object like style to create class dynamiclly

    $black: #; $white: #fff; $yellow: #ffe183; $dark-red: #e70404; $dark-green: #0d8268; $cloud-blue: #d ...

  8. 【题解】P1638 逛画展-C++

    原题传送门 思路这道题目可以通过尺取法来完成 (我才不管什么必须用队列)什么是尺取法呢?顾名思义,像尺子一样取一段,借用挑战书上面的话说,尺取法通常是对数组保存一对下标,即所选取的区间的左右端点,然后 ...

  9. 004_linux驱动之_class_create创建一个设备类

    (一)解析:class_create函数和class_destroy函数     创建一个类         和        删除一个类.   (二)class_create函数原型   struc ...

  10. 031_检测 MySQL 服务是否存活

    #!/bin/bash#host 为你需要检测的 MySQL 主机的 IP 地址,user 为 MySQL 账户名,passwd 为密码#这些信息需要根据实际情况修改后方可使用 host=127.0. ...