码迷,mamicode.com
首页 > 其他好文 > 详细

5.v-for

时间:2019-12-26 09:29:37      阅读:71      评论:0      收藏:0      [点我收藏+]

标签:算法   遍历数组   更新   数组   uid   for   code   data   其他   

1.语法格式:

注:item获得的都是值而不是下标

  1. 遍历数组:
    1. v-for="item in items"
    2. v-for="(item, index) in items"
  2. 遍历对象:
    1. v-for="item in items"
    2. v-for="(item, key) in items"
    3. v-for="(item, key, index) in items"

2.v-for中添加key

  添加key有利于复用,并且希望key为唯一的(希望像Java中的UUID类型),一般不用index,这是根据虚拟DOM的渲染机制算法决定的。

1 <div id="vue">
2     <li v-for="(item, index) in items" key="item">
3         {{item.message}}{{index}}
4     </li>
5 </div>

3.数组中那些方法是响应式的

  响应式:操作数据会让视图发生对应的更新

  • push
  • pop
  • shift
  • unshift
  • splice
  • sort
  • reverse

非常常用的方法为splice

splice作用:删除、添加和替换元素

  • 参数1:从哪里开始删除
  • 参数2:删除多少个
  • 参数3:添加哪些元素
this.letters.splice(1,0,‘x‘,‘y‘,‘z‘) //从位置1开始删除0个再插入x,y,z 
this.letters.splice(1,3,‘m‘,‘n,‘l‘) //从位置1开始删除3个再插入m,n,l
this.letters.splice(1,3) //从位置1开始删除3个

直接对数组操作不会没有响应式但的确改变了数组内容:

this.letters[0] = ‘t‘

可以使用Vue自带的方法实现修改响应

//set(要修改的对象,索引值,修改后的值)
Vue.set(this.letters, 0, ‘bbbb‘)

4.让列表中的某一个<li>响应事件

让某一个<li>点击后变红,其他都没有颜色

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .active{
 8             color: red;
 9         }
10     </style>
11 </head>
12 <body>
13 <div id="vue">
14     <ul>
15         <li v-for="(item, index) in movies"
16             :class="{active: currentIndex === index}"
17             @click="liClick(index)">
18             {{index}}-{{item}}
19         </li>
20     </ul>
21 </div>
22 
23 <!--导入Vue.js-->
24 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
25 <script type="text/javascript">
26     let vm = new Vue({
27         el: #vue,
28         data: {
29             movies: [a,b,c,d],
30             currentIndex: -1
31         },
32         methods: {
33             liClick(index){
34                 this.currentIndex = index;
35             }
36         }
37 
38 
39     });
40 </script>
41 </body>
42 </html>

 

5.v-for

标签:算法   遍历数组   更新   数组   uid   for   code   data   其他   

原文地址:https://www.cnblogs.com/zhihaospace/p/12099971.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!