<vue 基础知识 7、循环遍历>
代码结构
一、 01-v-for遍历数组
1、效果
2、代码
01-v-for遍历数组.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>01-v-for遍历数组</title>
</head>
<body> <div id="app">
<ul>
<li v-for="item in books">{{item}}</li>
<li>-----------分割线-----------</li>
<li v-for="(item, index) in books">{{index+1}}. {{item}}</li>
</ul>
</div> <script src="vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
books: ['三国演义', '红楼梦', '水浒传', '西游记']
}
})
</script> </body>
</html>
二、 02-v-for增加点击事件
1、 效果
鼠标点击哪一行，哪一行变红
2、代码
02-v-for增加点击事件.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-for增加点击事件</title> <style>
.active {
color: red;
}
</style>
</head>
<body> <div id="app">
<ul>
<li v-for="(item, index) in books" :class="{active: currentIndex === index}" @click="liClick(index)">
{{index}} {{item}}
</li>
</ul>
</div> <script src="vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
books: ['三国演义', '红楼梦', '水浒传', '西游记'],
currentIndex: 0
},
methods: {
liClick(index) {
this.currentIndex = index
}
}
})
</script> </body>
</html>
三、03-遍历对象
1、效果
2、代码
03-遍历对象.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>03遍历对象</title>
</head>
<body> <div id="app">
<ul>
<li v-for="(value, key, index) in info">
{{index}}-{{key}}-{{value}}
</li>
</ul>
</div> <script src="vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
info: {
name: 'yc',
age: 25,
height: 1.83
}
}
})
</script> </body>
</html>
四、04-测试哪些方法是响应式的
1、效果
（1）push()方法 是响应式的
注：向数组中添加一个或多个元素
（2）pop 是响应式的
注：删除数组中最后一个元素
（3）shift() 是相应式的
注：删除数组中第一个元素
（4）unshift() 是相应式的
注：在数组最前面添加元素
（5）splice() 是相应式的
注：删除元素、插入元素、替换元素
删除元素 ：第一个参数表示从哪个元素开始，第二个参数 传入你要删除几个元素
删除所有 ：第二个参数不传
替换元素 ：第二个参数表示我们要替换几个元素，后面的参数是替换参数的内容
追加参数：
<删除>
<替换元素>
<追加元素>
（6）sort() 是相应式的
注：排序
为了展示效果，先把数组中的数据搞乱然后再排序
（7）reverse() 是响应式的
注：内容翻转
8）通过索引值修改数据总的元素 不是响应式的
this.letters[0]='bbbbbb';
（9）这样写是响应式的
Vue.set(this.letters, 0, 'bbbbbb')
2、代码
04-测试哪些方法是响应式的.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>04-哪些方法是响应式的</title>
</head>
<body> <div id="app">
<ul>
<li v-for="item in letters">
{{item}}
</li>
<button @click="btnClick()">测试那些方法是响应式的</button>
</ul>
</div> <script src="vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
letters: ['a', 'b', 'c', 'd']
},
methods: {
btnClick() {
// 1.push方法
// this.letters.push('aaaa');
// this.letters.push('aaaa','bbbbb','cccccc');
//2.pop()删除数组中最后一个元素
//this.letters.pop();
//3.shift()删除数组中中第一个元素
//this.letters.shift();
//4.unshift() 在数组最前面添加元素
// this.letters.unshift('aaaaa');
// this.letters.unshift('aaaaa','bbbbb','cccccc'); //splice()作用：删除元素、插入元素、替换元素
//删除元素 ：第一个参数表示从哪个元素开始，第二个参数 传入你要删除几个元素
//例如：
// this.letters.splice(1,2)
// 删除所有 第二个参数不传 例如：
//this.letters.splice(1)
//替换元素 第二个参数表示我们要替换几个元素，后面的参数是替换参数的内容
//this.letters.splice(1,3,'m','n','p','x')
//追加参数
// this.letters.splice(1,0,'m','n','p','x') //排序
//this.letters.sort() //内容翻转
//reverse()
// this.letters.reverse() //通过索引值修改数据总的元素 不是响应式的
this.letters[0]='bbbbbb';
//这个是响应式的
//Vue.set(this.letters, 0, 'bbbbbb')
}
}
}) function sum(num1, num2) {
return num1 + num2;
} sum(20, 30); function sum(...num) { }
//这就可以跟任意多个函数
sum(20, 30, 40);
</script> </body>
</html>
<vue 基础知识 7、循环遍历>的更多相关文章
- 简单物联网：外网访问内网路由器下树莓派Flask服务器
最近做一个小东西,大概过程就是想在教室,宿舍控制实验室的一些设备. 已经在树莓上搭了一个轻量的flask服务器,在实验室的路由器下,任何设备都是可以访问的:但是有一些限制条件,比如我想在宿舍控制我种花 ...
- 利用ssh反向代理以及autossh实现从外网连接内网服务器
前言 最近遇到这样一个问题,我在实验室架设了一台服务器,给师弟或者小伙伴练习Linux用,然后平时在实验室这边直接连接是没有问题的,都是内网嘛.但是回到宿舍问题出来了,使用校园网的童鞋还是能连接上,使 ...
- 外网访问内网Docker容器
外网访问内网Docker容器 本地安装了Docker容器,只能在局域网内访问,怎样从外网也能访问本地Docker容器? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Docker容器 ...
- 外网访问内网SpringBoot
外网访问内网SpringBoot 本地安装了SpringBoot,只能在局域网内访问,怎样从外网也能访问本地SpringBoot? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装Java 1 ...
- 外网访问内网Elasticsearch WEB
外网访问内网Elasticsearch WEB 本地安装了Elasticsearch,只能在局域网内访问其WEB,怎样从外网也能访问本地Elasticsearch? 本文将介绍具体的实现步骤. 1. ...
- 怎样从外网访问内网Rails
外网访问内网Rails 本地安装了Rails,只能在局域网内访问,怎样从外网也能访问本地Rails? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Rails 默认安装的Rails端口 ...
- 怎样从外网访问内网Memcached数据库
外网访问内网Memcached数据库 本地安装了Memcached数据库,只能在局域网内访问,怎样从外网也能访问本地Memcached数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装 ...
- 怎样从外网访问内网CouchDB数据库
外网访问内网CouchDB数据库 本地安装了CouchDB数据库,只能在局域网内访问,怎样从外网也能访问本地CouchDB数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Cou ...
- 怎样从外网访问内网DB2数据库
外网访问内网DB2数据库 本地安装了DB2数据库,只能在局域网内访问,怎样从外网也能访问本地DB2数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动DB2数据库 默认安装的DB2 ...
- 怎样从外网访问内网OpenLDAP数据库
外网访问内网OpenLDAP数据库 本地安装了OpenLDAP数据库,只能在局域网内访问,怎样从外网也能访问本地OpenLDAP数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动 ...
随机推荐
- Linux笔记02: Linux环境_2.1虚拟机软件VMware
2.1 虚拟机软件VMware 如果直接在计算机上安装多个操作系统,同一个时刻只能运行一个操作系统,切换系统需重启计算机.VMware可以使用户在一台计算机上同时运行多个操作系统(如Windows.L ...
- 5分钟安装Kubernetes+带你轻松安装istio服务网格指南
上次我跟大家简单介绍了一下Kubernetes的各个组件及其含义,本期本来计划带领大家一起学习一些常用命令,但我认为这种方式可能无法达到学习的效果.有可能你们会直接忘记,甚至可能没有兴趣去学.我也理解 ...
- NLP项目实战02：英文文本识别
简介: 欢迎来到本篇文章!今天我们将讨论一个新的自然语言处理任务--英文短文识别.具体而言,即通过分析输入的英文文本来判断其是比较消极的还是比较积极的. 展示: 1.项目界面 如下所示是项目启动后用户 ...
- Selenium-无头模式headless
无头模式适合的场景: 部署到没有gui界面的服务器,比如linux 开发环境测试完全没问题后可以使用无头模式,提高selenium速度. # 使用headless无界面浏览器模式 chrome_opt ...
- 香橙派5plus从ssd启动Ubuntu
官方接口图 我实际会用到的就几个接口,背面的话就一个M.2固态的位置: 其中WIFI模块的接口应该也可以插2230的固态,不过是pcie2.0的速度,背面的接口则是pcie3.0*4的速度,差距还是挺 ...
- MyBatis 的缓存处理
作为常见的 ORM 框架,在使用 MyBatis 的过程中可以针对相关的查询进行缓存处理以提高查询的性能.本文将简要介绍一下 MyBatis 中默认的一级缓存和二级缓存,以及自定义缓存的处理 MyBa ...
- vuepress借助jenkins和svn实现文档自动化更新部署
前言 有个需求,需要将放在SVN的用vuepress写的文档进行自动化更新和部署,每次有人在本地将写好的md文件更新到svn时候,由jenkins实现自动打包来实现自动更新的功能. docker安装j ...
- 斯坦福 UE4 C++ ActionRoguelike游戏实例教程 14. 使用GameplayTag实现防守反击技能
斯坦福课程 UE4 C++ ActionRoguelike游戏实例教程 0.绪论 概述 本篇文章对应Lecture 17 - GameplayTags, 70节.本文将会结合前几节课使用的能力系统和G ...
- spring-mvc 系列：HttpMessageConverter（@RequestBody、RequestEntity、@ResponseBody、@RestController、ResponseEntity、文件上传下载）
目录 一.@RequestBody 二.RequestEntity 三.@ResponseBody 四.SpringMVC处理json 五.@RestController 六.ResponseEnti ...
- curl使用小记(一)
目录 1. 概述 2. 实例 2.1. 访问网页 2.2. 显示头信息 2.3. 保存网页 2.4. 下载图片 2.5. 用户代理设置 2.6. 代理设置 3. 参考 1. 概述 curl也就是com ...