# 1. v-for遍历数组 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!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" >&#123;&#123;item&#125;&#125;</li>
    </ul>
    <!-- 2.遍历过程有使用索引（下标值） -->
    <ul>
        <li v-for="(item,index) in names"  >&#123;&#123;index+":"+item&#125;&#125;</li>
    </ul>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el:"#app",
      data:{
        names:["zzz","ttt","yyy"]
      }
    })
  </script>
</body>
</html>
​ 一般需要使用索引值。`
  • {{index+":"+item}}
    • `index表示索引，item表示当前遍历的元素。 # 2. v-for遍历对象 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    <!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" >&#123;&#123;key+"-"+item&#125;&#125;</li>
        </ul>
        <!-- 格式为：(value, name, index) -->
        <ul>
          <li v-for="(item,key,index) in user" >&#123;&#123;key+"-"+item+"-"+index&#125;&#125;</li>
        </ul>

      </div>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
      <script>
        const app = new Vue({
          el:"#app",
          data:{
            user:{
              name:"zzz",
              height:188,
              age:24
            }
          }
        })
      </script>
    </body>
    </html>
    1. 遍历过程没有使用index索引，`
  • {{key+"-"+item}}
    • `，item表示当前元素是属性值，key表示user对象属性名。 2. 遍历过程使用index索引，index表示索引从0开始。 3. ![](https://cdn.jsdelivr.net/gh/krislinzhao/IMGcloud/img/20200513144634.png) # 3. v-for使用key 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    <!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">&#123;&#123;item&#125;&#125;</li>
        </ul>
        <button @click="add1">没有key</button>
        <!-- 加key如果要插入f使用diff算法高效,如果使用index做key一直变，所以item如果唯一可以使用item-->
        <ul>
            <li v-for="item in letters" :key="item">&#123;&#123;item&#125;&#125;</li>
        </ul>
        <button @click="add2">有key</button>
      </div>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/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>
    1. 使用key可以提高效率，加key如果要插入f使用diff算法高效,如果使用index做key一直变，所以item如果唯一可以使用item。 2. 不加key如果要插入f依次替换。 **v-for加key与不加** ![](https://cdn.jsdelivr.net/gh/krislinzhao/IMGcloud/img/20200513145801.png) > ​ 不加key渲染时候会依次替换渲染，加了key会直接将其放在指定位置，加key提升效率。 # 4. 数组的响应方式 ​ 我们改变DOM绑定的数据时，DOM会动态的改变值。数组也是一样的。但是对于动态变化数据，有要求，不是任何情况改变数据都会变化。 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    <!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">&#123;&#123;item&#125;&#125;</li>
        </ul>
        <button @click="btn1">push</button><br>
        <button @click="btn2">通过索引值修改数组</button>
      </div>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/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>
    1. btn2按钮是通过索引值修改数组的值，这种情况，数组letters变化，DOM不会变化。 2. 而数组的方法，例如`push()`、`pop()`、`shift()`、`unshift()`、`splice()`、`sort()`、`reverse()`等方法修改数组的数据，DOM元素会随之修改。 3. > push()：在最后添加元素 > > pop()：删除最后一个元素 > > shift()：删除第一个元素 > > unshift()：添加在最前面，可以添加多个 > > splic()：删除元素、插入元素、替换元素 > > splice(1,1)再索引为1的地方删除一个元素,第二个元素不传，直接删除后面所有元素 > > splice(index,0,'aaa')再索引index后面删除0个元素，加上'aaa' > > splice(1,1,'aaa')替换索引为1的后一个元素为'aaa' # 5. 综合练习 ​ 现在要求将数组内的电影展示到页面上，并选中某个电影，电影背景变红，为选中状态。 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    <!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}">&#123;&#123;index+"---"+item&#125;&#125;</li>
        </ul>
      </div>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
      <script>
        const app = new Vue({
          el: "#app",
          data: {
            movies: ['复仇者联盟', '蝙蝠侠', '海贼王', '星际穿越'],
            curIndex:0
          },
          methods: {
            liClick(index){
              this.curIndex = index
            }
          }
        })
      </script>
    </body>

    </html>
    1. 先使用`v-for`将电影列表展示到页面上，并获取index索引定位当前的`
  • `标签。 2. 给每个`
  • `标签加上,单击事件，并将index传入单击事件的回调函数methods的`liClick()`。 3. 定义一个变量`curIndex`表示当前索引，初始值为0，用于表示选中状态的电影列。 4. 定义个class样式active，在active为激活状态是，` background-color: red;`为红色。使用表达式`index=curIndex`判断当前选中状态的列。 5. ![](https://cdn.jsdelivr.net/gh/krislinzhao/IMGcloud/img/20200513190250.gif)