时间戳

首页 > 技术文章 > <vue 基础知识 7、循环遍历>

<vue 基础知识 7、循环遍历>

yclh 2021-11-19 16:20 原文

代码结构

 

 

 

一、     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>

 

 

推荐阅读