🎉🎉🎉欢迎来到我的博客,我是一名自学了2年半前端的大一学生,熟悉的技术是JavaScript与Vue.目前正在往全栈方向前进, 如果我的博客给您带来了帮助欢迎您关注我,我将会持续不断的更新文章!!!🙏🙏🙏
@[toc]
1. v-for遍历数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- 1.遍历过程没有使用索引（下标值） -->
<ul>
<li v-for="item in names" >{
{item}}</li>
</ul>
<!-- 2.遍历过程有使用索引（下标值） -->
<ul>
<li v-for="(item,index) in names" >{
{index+":"+item}}</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
names:["zzz","ttt","yyy"]
}
})
</script>
</body>
</html>
一般需要使用索引值。<li v-for="(item,index) in names" >{
{index+":"+item}}</li>index表示索引，item表示当前遍历的元素。
2. v-for遍历对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- 1.遍历过程没有使用index索引-->
<!-- 格式为：(value, name) -->
<ul>
<li v-for="(item,key) in user" >{
{key+"-"+item}}</li>
</ul>
<!-- 格式为：(value, name, index) -->
<ul>
<li v-for="(item,key,index) in user" >{
{key+"-"+item+"-"+index}}</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
user:{
name:"zzz",
height:188,
age:24
}
}
})
</script>
</body>
</html>
- 遍历过程没有使用index索引，
<li v-for="(item,key) in user" >{ {key+"-"+item}}</li>，item表示当前元素是属性值，key表示user对象属性名。 - 遍历过程使用index索引，index表示索引从0开始。
3. v-for使用key
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>v-for使用key</title>
</head>
<body>
<div id="app">
<!-- 不加key如果要插入f依次改变 -->
<ul>
<li v-for="item in letters">{
{item}}</li>
</ul>
<button @click="add1">没有key</button>
<!-- 加key如果要插入f使用diff算法高效,如果使用index做key一直变，所以item如果唯一可以使用item-->
<ul>
<li v-for="item in letters" :key="item">{
{item}}</li>
</ul>
<button @click="add2">有key</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
letters:['a','b','c','d','e']
},
methods: {
add1(){
this.letters.splice(2,0,'f')
},
add2(){
this.letters.splice(2,0,'f')
}
}
})
</script>
</body>
</html>
- 使用key可以提高效率，加key如果要插入f使用diff算法高效,如果使用index做key一直变，所以item如果唯一可以使用item。
- 不加key如果要插入f依次替换。
v-for加key与不加
不加key渲染时候会依次替换渲染，加了key会直接将其放在指定位置，加key提升效率。
4. 数组的响应方式
我们改变DOM绑定的数据时，DOM会动态的改变值。数组也是一样的。但是对于动态变化数据，有要求，不是任何情况改变数据都会变化。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>数组的响应式方法 </title>
</head>
<body>
<div id="app">
<!-- 数组的响应式方法 -->
<ul>
<li v-for="item in letters">{
{item}}</li>
</ul>
<button @click="btn1">push</button><br>
<button @click="btn2">通过索引值修改数组</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
letters:['a','b','c','d','e']
},
methods: {
btn1(){
//1.push
this.letters.push('f')
//2.pop()删除最后一个元素
//this.letters.pop()
//3.shift()删除第一个
//this.letters.shift()
//4.unshift()添加在最前面,可以添加多个
//this.letters.unshift('aaa','bbb','ccc')
//5.splice():删除元素/插入元素/替换元素
//splice(1,1)在索引为1的地方删除一个元素,第二个元素不传，直接删除后面所有元素
//splice(index,0,'aaa')再索引index后面删除0个元素，加上'aaa',
//splice(1,1,'aaa')替换索引为1的后一个元素为'aaa'
// this.letters.splice(2,0,'aaa')
//6.sort()排序可以传入一个函数
//this.letters.sort()
//7.reverse()反转
// this.letters.reverse()
},
btn2(){
this.letters[0]='f'
}
}
})
</script>
</body>
</html>
btn2按钮是通过索引值修改数组的值，这种情况，数组letters变化，DOM不会变化。
而数组的方法，例如
push()、pop()、shift()、unshift()、splice()、sort()、reverse()等方法修改数组的数据，DOM元素会随之修改。-
push()：在最后添加元素
pop()：删除最后一个元素
shift()：删除第一个元素
unshift()：添加在最前面，可以添加多个
splic()：删除元素、插入元素、替换元素
splice(1,1)再索引为1的地方删除一个元素,第二个元素不传，直接删除后面所有元素
splice(index,0,'aaa')再索引index后面删除0个元素，加上'aaa'
splice(1,1,'aaa')替换索引为1的后一个元素为'aaa'
5. 综合练习
现在要求将数组内的电影展示到页面上，并选中某个电影，电影背景变红，为选中状态。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>综合练习</title>
<style>
.active {
background-color: red;
}
</style>
</head>
<body>
<div id="app">
<!-- 数组的响应式方法 -->
<ul>
<li v-for="(item,index) in movies" @click="liClick(index)" :class="{active:index===curIndex}">{
{index+"---"+item}}</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
movies: ['复仇者联盟', '蝙蝠侠', '海贼王', '星际穿越'],
curIndex:0
},
methods: {
liClick(index){
this.curIndex = index
}
}
})
</script>
</body>
</html>
- 先使用
v-for将电影列表展示到页面上，并获取index索引定位当前的<li>标签。 - 给每个
<li>标签加上,单击事件，并将index传入单击事件的回调函数methods的liClick()。 - 定义一个变量
curIndex表示当前索引，初始值为0，用于表示选中状态的电影列。 - 定义个class样式active，在active为激活状态是，
background-color: red;为红色。使用表达式index=curIndex判断当前选中状态的列。 
Hi👋,这里是瑞雨溪一个喜欢JavaScript和Vue的大学生,如果我的文章给你带来的帮助,欢迎您关注我,我会持续不断的更新更多优质文章.你的关注就是我的动力!!!🎉🎉🎉
