代码结构

一、     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、循环遍历>的更多相关文章

  1. 简单物联网：外网访问内网路由器下树莓派Flask服务器

    最近做一个小东西,大概过程就是想在教室,宿舍控制实验室的一些设备. 已经在树莓上搭了一个轻量的flask服务器,在实验室的路由器下,任何设备都是可以访问的:但是有一些限制条件,比如我想在宿舍控制我种花 ...

  2. 利用ssh反向代理以及autossh实现从外网连接内网服务器

    前言 最近遇到这样一个问题,我在实验室架设了一台服务器,给师弟或者小伙伴练习Linux用,然后平时在实验室这边直接连接是没有问题的,都是内网嘛.但是回到宿舍问题出来了,使用校园网的童鞋还是能连接上,使 ...

  3. 外网访问内网Docker容器

    外网访问内网Docker容器 本地安装了Docker容器,只能在局域网内访问,怎样从外网也能访问本地Docker容器? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Docker容器 ...

  4. 外网访问内网SpringBoot

    外网访问内网SpringBoot 本地安装了SpringBoot,只能在局域网内访问,怎样从外网也能访问本地SpringBoot? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装Java 1 ...

  5. 外网访问内网Elasticsearch WEB

    外网访问内网Elasticsearch WEB 本地安装了Elasticsearch,只能在局域网内访问其WEB,怎样从外网也能访问本地Elasticsearch? 本文将介绍具体的实现步骤. 1. ...

  6. 怎样从外网访问内网Rails

    外网访问内网Rails 本地安装了Rails,只能在局域网内访问,怎样从外网也能访问本地Rails? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Rails 默认安装的Rails端口 ...

  7. 怎样从外网访问内网Memcached数据库

    外网访问内网Memcached数据库 本地安装了Memcached数据库,只能在局域网内访问,怎样从外网也能访问本地Memcached数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装 ...

  8. 怎样从外网访问内网CouchDB数据库

    外网访问内网CouchDB数据库 本地安装了CouchDB数据库,只能在局域网内访问,怎样从外网也能访问本地CouchDB数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Cou ...

  9. 怎样从外网访问内网DB2数据库

    外网访问内网DB2数据库 本地安装了DB2数据库,只能在局域网内访问,怎样从外网也能访问本地DB2数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动DB2数据库 默认安装的DB2 ...

  10. 怎样从外网访问内网OpenLDAP数据库

    外网访问内网OpenLDAP数据库 本地安装了OpenLDAP数据库,只能在局域网内访问,怎样从外网也能访问本地OpenLDAP数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动 ...

随机推荐

  1. Java八股面试整理(3)

    21.说一说hashCode()和equals()的关系 hashCode()用于获取哈希码(散列码),eauqls()用于比较两个对象是否相等,它们应遵守如下规定: 如果两个对象相等,则它们必须有相 ...

  2. MongoDB的聚合笔记

    1,聚合 聚合(aggregate)主要用于计算数据,类似sql中的sum().avg(). 常用的表达式如上图. 1.1,aggregate  语法 语法:     db.集合名称.aggregat ...

  3. [CF1844G] Tree Weights

    题目描述 You are given a tree with $ n $ nodes labelled $ 1,2,\dots,n $ . The $ i $ -th edge connects no ...

  4. LeetCode331：验证二叉树的前序序列化（递归）

    解题思路:把所有元素存成数组,设置一个全局下标next,表示当前节点如果要继续遍历应当从数组的哪个位置开始,然后从下标 0 开始DFS.如果DFS返回真并且next下标等于数组的长度,说明元素已经全部 ...

  5. 如何 使 Java、C# md5 加密的值保持一致

    Java C# md5 加密值保持一致,一般是编码不一致造成的值不同 JAVA (加密:123456) C#(加密:123456) UTF-8 e10adc3949ba59abbe56e057f20f ...

  6. MinIO客户端之mb

    MinIO提供了一个命令行程序mc用于协助用户完成日常的维护.管理类工作. 官方资料 mc mb MinIO对象锁定 桶版本控制 桶复制 站点复制概述 创建桶bkt1,命令如下: ./mc mb lo ...

  7. 从零玩转第三方登录之WeChat公众号登陆-cong-ling-wan-zhuan-di-san-fang-deng-lu-zhi-wechat-gong-zhong-hao-deng-lu

    title: 从零玩转第三方登录之WeChat公众号登陆 date: 2022-09-03 16:32:57.876 updated: 2022-09-03 16:32:57.876 url: htt ...

  8. 七天.NET 8操作SQLite入门到实战 - 第七天BootstrapBlazor UI组件库引入（1）

    前言 由于第七天Blazor前端页面编写和接口对接的内容比较的多,所以这一章节将会分为三篇文章来进行讲解,大家可以认为分为早.中.晚来进行阶段性学习,从而提高学习效率. 七天.NET 8 操作 SQL ...

  9. HDU 2144 Evolution 后缀树/后缀数组

    HDU 2144 Evolution 后缀树/后缀数组 题意 给我们不到一百个字符串(长度不到一百)以及一个百分比q,然后如果某两个字符串的最长公共子串占比超过了q(在两个串中都超过)则两个串为一个集 ...

  10. Xshell与Xftp安装与使用

    Xshell与Xftp安装 软件安装:官网或者应用商店 安装结束 nslicense.dll替换 下载文件 使用 登录 双击刚刚建立的连接 表示建立成功 点击文件传输 右边就是服务器的文件,左边就是本 ...