Vue第4.1天(遍历循环)

v-for遍历数组：

一般需要使用索引值。`

{{index+":"+item}}

`index表示索引，item表示当前遍历的元素。

    
    

      
{{item}}
    
    
    

        
{{index+":"+item}}
    
  
  
  

v-for遍历对象:（难点）

1. 遍历过程没有使用index索引，`

{{key+"-"+value}}

`，value表示当前元素是属性值，key表示user对象属性名。
2. 遍历过程使用index索引，index表示索引从0开始。

1. 使用key可以提高效率，加key如果要插入f使用diff算法高效,如果使用index做key一直变，所以item如果唯一可以使用item。

2. 不加key如果要插入f依次替换。

加了key的话 就是唯一标识 如果你背后有input框之类的输入，打算顺序也不影响你的使用
底层是依靠 key 和标签名来决定旧 DOM 元素能否复用的
当然，Vue默认是有索引值index帮助你自动填充的
不加 其实就是默认使用索引值 也就是index
    
    
    

      
{{key+"-"+value}}
    
    
    Vue默认是有索引值index帮助你自动填充的
    

      
{{key+"-"+value+"-"+index}}
    

  
  
  

数组的响应式方法：

1. btn2按钮是通过索引值修改数组的值，这种情况，数组letters变化，DOM不会变化。

2. 而数组的方法，例如`push()`、`pop()`、`shift()`、`unshift()`、`splice()`、`sort()`、`reverse()`等方法修改数组的数据，DOM元素会随之修改。

3. > splic()：删除元素、插入元素、替换元素
   >
   > splice(1,1)再索引为1的地方删除一个元素,第二个元素不传，直接删除后面所有元素
   >
   > splice(index,0,'aaa')再索引index后面删除0个元素，加上'aaa'
   >
   > splice(1,1,'aaa')替换索引为1的后一个元素为'aaa'
   >
   > 

    
    

      
{{item}}
    
    push

    通过索引值修改数组


  
  
  

练习：    现在要求将数组内的电影展示到页面上，并选中某个电影，电影背景变红，为选中状态。

```html




  
  
  
  
  



  

    
    

      
{{index+"---"+item}}
    
  
  
  



```

1. 先使用`v-for`将电影列表展示到页面上，并获取index索引定位当前的`

`标签。
2. 给每个`

`标签加上,单击事件，并将index传入单击事件的回调函数methods的`liClick()`。
3. 定义一个变量`curIndex`表示当前索引，初始值为0，用于表示选中状态的电影列。
4. 定义个class样式active，在active为激活状态是，` background-color: red;`为红色。使用表达式`index=curIndex`判断当前选中状态的列。