<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 安装并启动 ...
随机推荐
- 如何用MySQL快速导入sql数据？
在 MySQL 中,可以使用多种方法来快速导入 SQL 数据.以下是一些常用的方法和技巧,以帮助你在 MySQL 中快速导入大量的 SQL 数据. 1. 使用 mysql 命令行工具 - 将 SQL ...
- erp——绩效考核系统——数据需求说明书
绩效考核--数据需求说明书 1.引言 1.1编写目的 数据要求说明书详细的提供了系统中各个数据的流向,是设计数据库的关键所在,为以后的编码以及测试提供一份可靠的依据. 1.2 对象 本<数据要求 ...
- UMP系统功能
1.容灾: 主库发生故障,执行从库 主从切换: 主库恢复:(切换过程中有短暂的不可用) 2.读写分离 3.分库分表: 当采用分库分表时,系统处理用户查询的过程如下: 4.资源管理: 具体的MySQL实 ...
- RabbitMQ入门到进阶
1.MQ简介 MQ 全称为 Message Queue,是在消息的传输过程中保存消息的容器.多用于分布式系统 之间进行通信. 2.为什么要用 MQ 1.流量消峰 没使用MQ 使用了MQ 2.应用解耦 ...
- C++ Qt开发：TableView与TreeView组件联动
Qt 是一个跨平台C++图形界面开发库,利用Qt可以快速开发跨平台窗体应用程序,在Qt中我们可以通过拖拽的方式将不同组件放到指定的位置,实现图形化开发极大的方便了开发效率,本章将重点介绍TableVi ...
- MinIO入门
MinIO 是一种高性能.S3 兼容的对象存储. 官方资料 中国官网 代码仓库 安装和部署MinIO 单节点单硬盘部署MinIO 单节点多硬盘部署MinIO 多节点多硬盘部署 站点复制概述 管理现有的 ...
- ElasticSearch之cat thread pool API
命令样例如下: curl -X GET "https://localhost:9200/_cat/thread_pool?v=true&pretty" --cacert $ ...
- 【OpenCV】 OpenCV 源码编译并实现 CUDA 加速 (Windows)
目录 1. 环境准备 1.1 软件环境 1. 2 源码下载 2. CMake编译项目 2.1 创建cmake项目 2.2 设置编译配置 2.3 解决异常 2.3.1 文件下载异常 2.3.2 解决CU ...
- Kubernetes架构及安装
K8s架构 k8s内部是有几个组件的,分别是controller manager,api-server,scheduler,kubelet以及etcd,kube-proxy还有k8s客户端kubect ...
- 初探 Linux Cgroups：资源控制的奇妙世界
Cgroups 是 linux 内核提供的功能,由于牵涉的概念比较多,所以不太容易理解.本文试图通过简单的描述和 Demo 帮助大家理解 Cgroups . 如果你对云原生技术充满好奇,想要深入了解更 ...