08-Vue的循环遍历
v-for遍历数组
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Documenttitle>
head>
<body>
<div id="app">
<ul>
<li v-for="item in names">{{item}}li>
ul>
<ul>
<li v-for="(item, index) in names">{{index + 1}}-{{item}}li>
ul>
div>
<script src="../js/vue.js">script>
<script>
const app = new Vue({
el: "#app",
data: {
names: ["why", "kobe", "james", "curry"]
}
})
script>
body>
html>
1.v-for是什么
for是什么这里不做讲解，v-for就是Vue专用的便捷版的for。遍历一个简单的数组不用再像原来那个for(int i = 0;i < item.length;i ++)了，只需for(item in items)即可。详细操作如下：
<ul>
<li v-for="item in names">{{item}}li>
ul>
此时item就是数组names中的每一个数据项，而无序列表li的个数就是names的长度，用Mustache语法将其展示即可。效果图如下：
2.index的加入
很多时候我们的需求不仅仅是每个数据项，还有当前数据项的索引(下标)，Vue也帮我们在后台处理好了。代码如下：
<ul>
<li v-for="(item, index) in names">{{index + 1}}-{{item}}li>
ul>
在使用时，只要将index和item放在一起即可使用index，切记item在index前面。效果图如下：
v-for遍历对象
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Documenttitle>
head>
<body>
<div id="app">
<ul>
<li v-for="item in info">{{item}}li>
ul>
<ul>
<li v-for="(value, key) in info">{{key}}-{{value}}li>
ul>
<ul>
<li v-for="(value, key, index) in info">{{index}}-{{key}}-{{value}}li>
ul>
div>
<script src="../js/vue.js">script>
<script>
const app = new Vue({
el: "#app",
data: {
info: {
name: "blueribbon",
age: 21,
height: 191
}
}
})
script>
body>
html>
1.怎么遍历对象
如果data变量中有一个对象，它有各个不同的属性和对应的值，那也可以用v-for将它的各个属性以及属性值遍历出来显示在浏览器。
- 只获取value
<ul>
<li v-for="item in info">{{item}}li>
ul>
效果图如下：
- 获取key和value ==> (value, key)
<ul>
<li v-for="(value, key) in info">{{key}}-{{value}}li>
ul>
切记key和value的位置不能交换。效果图如下：
- 获取key，value和index ===> (value, key, index)
<ul>
<li v-for="(value, key, index) in info">{{index}}-{{key}}-{{value}}li>
ul>
切记key，value和index三者的位置不能交换。效果图如下：
v-for使用过程添加key
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Documenttitle>
head>
<body>
<div id="app">
<ul>
<li v-for="(item, index) in letters" :key="index">{{item}}li>
ul>
div>
<script src="../js/vue.js">script>
<script>
const app = new Vue({
el: "#app",
data: {
letters: ["A", "B", "C", "D", "E"]
}
})
script>
body>
html>
1.为什么添加key
key是什么我们都知道，即唯一标识，这和Vue的动态改变页面结构有关，至于详细的解释，我借鉴了一下别人的说法，为什么添加key。
2.怎么添加key
使用v-bind:key=""，即可为当前标签添加key，由于b-bind的大量使用，贴心的Vue后台也为我们准备了语法糖即:key=""。
3.将什么设置为key
我们都知道开发时数据都是从后端请求过来的，而了解数据库的人都知道，几乎每个表都会有一个主键，而我们的key一般都是信息的主键。
小作业
要求：遍历一个电影名字列表，默认第一个是红色字体，然后点击哪一项，该项就变成红色字体，而原来的红色字体消失。
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Documenttitle>
<style>
.red {
color: red;
}
style>
head>
<body>
<div id="app">
<ul>
<li
v-on:click="btnClick(index)"
:class="{red:currentIndex === index}"
v-for="(item, index) in movies"
:key="index"
>
{{index}}-{{item}}
li>
ul>
div>
<script src="../js/vue.js">script>
<script>
const app = new Vue({
el: "#app",
data: {
movies: ["海王", "火影忍者", "进击的巨人", "星际穿越"],
red: "red",
currentIndex: 0
},
methods: {
btnClick: function(e) {
this.currentIndex = e
}
}
})
script>
body>
html>
1.内容讲解
- 首先是v-for遍历整个电影列表
- 用前面讲过的知识点对象语法绑定class给每个li定义一个样式red(已经在style中定义)，当该li的index等于data变量中的currentIndex为true时，样式red生效，因为默认初始第一项是红色，所以currentIndex初始值为0。
- 给第个li添加一个点击事件，当前项被点击时，data变量中的currentIndex的值更改为当前项的index，则当前项的样式red为true，第一项的样式red为false。
- 绑定key为每一项的index。
2.难点分析
我认为该题的难点在于新建一个currentIndex变量，点击更改颜色，我们很大可能会想到和下标联系在一起，但是可能想不到会新建一个变量保存当前的颜色对应下标，这需要我们对v-for和v-bind的熟练结合运用。
运行效果如下：
第一次记录自己的学习笔记，如果您发现问题，欢迎指点。