<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 安装并启动 ...
随机推荐
- 记一次逆向分析解密还原Class文件
前言 前阵子我的一位朋友发来一份代码让我帮忙看看.具体就是所有的jsp文件内容和大小都一样,漏洞挖掘无从下手.经过分析发现所有的Class都使用了自定义的加密工具加密,经过逆向分析,顺利解密,因而有了 ...
- [ABC274Ex] XOR Sum of Arrays
section> Problem Statement For sequences $B=(B_1,B_2,\dots,B_M)$ and $C=(C_1,C_2,\dots,C_M)$, eac ...
- 关于yolov3在训练自己数据集时容易出现的bug集合，以及解决方法
早先写了一篇关于yolov3训练自己数据集的博文Pytorch实现YOLOv3训练自己的数据集 其中很详细的介绍了如何的训练自定义的数据集合,同时呢笔者也将一些容易出现的bug写在了博文中,想着的是可 ...
- [Acwing 164. 可达性统计] 题解报告
事实上,这道题并不需要拓扑排序.(当然,拓扑排序还是更快) 题目分析 首先,题目中说了,这是一个有向无环图,所以,我们可以考虑 \(\texttt{DP}\) / 记搜 / 拓扑排序 来解决这道题. ...
- 使用NPOI导出Excel，并在Excel指定单元格插入图片
一.添加Nuget引用 二.弹框选择保存路径 string fileName = $"记录_{DateTime.Now.ToString("yyyyMMdd_HHmmss" ...
- 实时数据流无忧：用 SpringBoot 和 SSE 打造动态前端更新的终极指南
用 SpringBoot 和 SSE 打造动态前端更新的终极指南 你知道什么是开发者的梦魇吗?慢!慢!慢!在一个需要实时数据更新的应用中,如果数据像乌龟一样慢吞吞地爬行,那用户体验就会像坐过山车一样直 ...
- 创建傀儡进程svchost.exe并注入DLL文件（Shellcode）
本文主要利用 SetThreadContext 修改进程中的线程上下文来实现Dll注入(ShellCode). 实现原理 首先,使用 CreateProcess 函数创建svchost.exe进程,并 ...
- hiveSQL常见专题
SQL强化 SQL执行顺序 --举例: select a.sex, b.city, count(1) as cnt, sum(salary) as sum1 from table1 a join ta ...
- 一文带你了解Web前端发展历程
摘要:自互联网行业发展以来,web前端不断发展变化着.在前人的基础上,后人有幸能够站在前人的肩膀上行走.前端的发展变化不仅是继承式的迭代,同时也是不断的变革和创造. 一.前端到底是个什么? 简单点说, ...
- 详解NLP和时序预测的相似性【附赠AAAI21最佳论文INFORMER的详细解析】
摘要:本文主要分析自然语言处理和时序预测的相似性,并介绍Informer的创新点. 前言 时序预测模型无外乎RNN(LSTM, GRU)以及现在非常火的Transformer.这些时序神经网络模型的主 ...