<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 安装并启动 ...
随机推荐
- 开发环境搭建：CubeMX、Keil MDK-ARM、仿真器驱动程序
来源:成电<微机原理与嵌入式系统>漆强 第三章 STM32微控制器开发环境的搭建 一.STM32 CubeMX的安装 1.STM32 CubeMX的下载和安装 先安装java环境安装 下载 ...
- 无序对的GCD
求\(\sum_{i = 1}^n \sum_{j = i+1}^n GCD(a_i, a_j)\) \(N\)为上确界,\(n\)为\(a\)数组元素个数,\(D\)为约数个数. 方法一 \(1.\ ...
- 快速入门：使用 .NET Aspire 组件实现缓存
前言 云原生应用程序通常需要各种类型的可扩展缓存解决方案来提高性能..NET Aspire 组件简化了连接到流行的缓存服务(例如 Redis)的过程,今天小编就为大家简单介绍一下如何使用 .NET A ...
- [ARC132E] Paw
题目链接 考虑最后形态,一定是有某一个区间 \([l,r]\) 保持初始的样子, \(l\) 前面都是 <,\(r\) 后面都是 >. 这个区间一定是某两个相邻圆点的位置.设 \(f_i\ ...
- 使用FRP实现内网穿透<阿里云服务器端+WINDOWS客户端>
使用FRP实现内网穿透 1.准备条件 一个云服务器 一个FRP服务端文件,下载地址 一个FRP的windows客户端文件,下载地址 2.服务端 使用远程客户端工具,连接你自己的云服务器(我使用的是阿里 ...
- Scrapy在pipeline中集成mongodb
settings.py中设置配置项 MONGODB_HOST = "127.0.0.1" MONGODB_PORT = 27017 MONGODB_DB_NAME = " ...
- linux rz/sz 拖动文件上传
不需要第三方上传文件直接 rz上传 拖动.以及 sz下载文件 多舒服 那么 他来了 安装与使用 yum安装 yum -y install lrzsz 使用上传文件,执行命令rz,会跳出文件选择窗口,选 ...
- BFS（二）转动转盘锁
对应 LeetCode 752.转动转盘锁 ### 问题定义 你有一个带有四个圆形拨轮的转盘锁.每个拨轮都有10个数字: '0', '1', '2', '3', '4', '5', '6', '7', ...
- 2023-05-19：汽车从起点出发驶向目的地，该目的地位于出发位置东面 target 英里处。 沿途有加油站，每个 station[i] 代表一个加油站， 它位于出发位置东面 station[i][
2023-05-19:汽车从起点出发驶向目的地,该目的地位于出发位置东面 target 英里处. 沿途有加油站,每个 station[i] 代表一个加油站, 它位于出发位置东面 station[i][ ...
- Asp .Net Core系列：AutoMapper自动映射框架介绍、使用
1.介绍 AutoMapper是一个对象-对象映射器.对象-对象映射通过将一种类型的输入对象转换为另一种类型的输出对象来工作.使AutoMapper变得有趣的是,它提供了一些有趣的约定,以免去搞清楚如 ...