<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>
资源丰富的的网盘资源：网盘资源大全！ 推荐一个适合零基础学习SQL的网站：不用安装数据库，在线轻松学习SQL！
浙公网安备 33010602011771号