1、v-for遍历数组和对象

  1. <ul>
  2.         <li v-for="item in array">{{item}}</li><br>
  3.         <li v-for="(item,index) in array">{{item}}--{{index}}</li><br>
  4.         <li v-for="(value,key,index) in obj">{{value}}--{{key}}--{{index}}</li><br>
  5.  
  6. </ul>

2、v-for绑定和非绑定key的区别

加上key之后，能够更好的复用，减少资源的消耗。

  1. <li v-for="item in list" :key="item">{{item}}</li>

没加key之前，如果向数组中间添加一个元素，要依次替换数组元素，

加上key之后，可以直接在数组中间插入这个元素。

*******完整代码******

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>Document</title>
  7.     <script src="./js/vue.js"></script>
  8. </head>
  9. <div id="app">
  10.     <ul>
  11.         <li v-for="item in array">{{item}}</li><br>
  12.         <li v-for="(item,index) in array">{{item}}--{{index}}</li><br>
  13.         <li v-for="(value,key,index) in obj">{{value}}--{{key}}--{{index}}</li><br>
  14.     </ul><br>
  15.  
  16.     <ul>
  17.         <li v-for="item in list" :key="item">{{item}}</li>
  18.     </ul>
  19. </div>
  20.  
  21. <body>
  22.     <script>
  23.         let vm = new Vue({
  24.             el: '#app',
  25.             data: () => ({
  26.                 array: [
  27.                     '王者荣耀', '和平精英', '绝地求生'
  28.                 ],
  29.                 obj: {
  30.                     name: '何欣航', age: '18', height: '1.80'
  31.                 },
  32.                 list:['A','B','C','D','E']
  33.             }),
  34.             methods: {}
  35.         })
  36.     </script>
  37. </body>
  38.  
  39. </html>

小案例：点击更换背景颜色

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>Document</title>
  7.     <script src="./js/vue.js"></script>
  8.     <style>
  9.         .active {
  10.             background-color: yellowgreen;
  11.         }
  12.     </style>
  13. </head>
  14. <div id="app">
  15.     <ul>
  16.         <li v-for="(item,index) in game" v-on:click="getClass(index)" :class="{active:cindex===index}">{{item}}</li>
  17.     </ul>
  18. </div>
  19.  
  20. <body>
  21.     <script>
  22.         let vm = new Vue({
  23.             el: '#app',
  24.             data: () => ({
  25.                 game: ['王者荣耀', '和平精英', '炉石传说', '穿越火线'],
  26.                 cindex: 0
  27.             }),
  28.             methods: {
  29.                 getClass: function (index) {
  30.                     this.cindex = index
  31.                 }
  32.             }
  33.         })
  34.     </script>
  35. </body>
  36.  
  37. </html>

vue-v-for的更多相关文章

  1. vue.js在windows本地下搭建环境和创建项目

    Vue.js是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合.另一方面,Vu ...

  2. windows下vue+webpack前端开发环境搭建及nginx部署

    一.开发环境搭建 1.前端框架一般都依赖nodejs,我们首先要安装node.js.请参考http://www.cnblogs.com/wuac/p/6381819.html. 2.由于许多npm的源 ...

  3. Vue.js的从入门到放弃进击录（二）

    哇塞,昨晚更新的篇(一)这么多阅读量,看来入坑的人越来越多啦~熬了一个礼拜夜,今天终于生病惹~国庆要肥家咯·所以把篇(二)也更完.希望各位入坑的小伙伴能少跳几个坑呗.如果有什么不对的地方也欢迎讨论指正 ...

  4. vue初级学习--环境搭建

    一.导语 最近总想学点东西,es6啊.typescript啊,都想学,刚好有个机遇,可以学点vue,嗯,那就开始吧. 二.正文 1.node环境: 下载安装nodeJs,最好是1.6以上的版本,下载地 ...

  5. 前端MVC Vue2学习总结（二）——Vue的实例、生命周期与Vue脚手架（vue-cli）

    一.Vue的实例 1.1.创建一个 Vue 的实例 每个 Vue 应用都是通过 Vue 函数创建一个新的 Vue 实例开始的: var vm = new Vue({ // 选项 }) 虽然没有完全遵循 ...

  6. 【vue系列之三】从一个vue-pdf-shower，说说vue组件和npm包

    前言 从去年年初开始,自己便下决心要写一个vue系列的博客,但时至今日,才写系列的第三篇博客,想来甚是惭愧. 但是慢归慢,每一篇都要保证质量,以及要写出自己的心路历程,防止自己工作中填的坑再让读者走一 ...

  7. 怎么看vue版本

    查看vue版本号是 vue -V 而不是npm vue -v ,npm vue -v 等同于npm -v vue -V: 后面那个V是大写的.

  8. vue不是内部或外部命令，配置一个Path系统变量就可以解决

    作为一个vue小白,最近为vue安装真是操碎了心.无论怎么查找网上的教程,还是解决不了"vue不是内部或外部的命令"诸如此类的问题.好在功夫不负有心人,终于在多次的试验下,成功解决 ...

  9. 如何用vue实现树形菜单？

    在公司培训了2周,布置的作业是从树形,grid分页以及echarts中选一个.由于都不是很熟,就挑了第一个.本来想在网上找找参考,然后模仿着做一个,但是网上的代码多少参差不齐,写到一半没了,所以只要自 ...

  10. vue初学者

    先分享一波福利 vue学习视频    链接:https://pan.baidu.com/s/1ggSfE75 密码:7h2a        1.先安装 webpack vue-cli          ...

随机推荐

  1. .net连接Oracle

    通过网上了解到.net连接Oracle主要有3种方法.(1)System.Data.OracleClient微软的System.Data.OracleClient可以直接引用,但是VS会提示“Syst ...

  2. 【JavaWeb】jQuery对Ajax的支持

    jQuery对Ajax的支持 jQuery对Ajax进行封装,提供了$.ajax()方法 语法:$.ajax(options) 常用设置项 说明 url 发送请求地址 type 请求类型get|pos ...

  3. git本地忽略

    添加本地忽略文件 git update-index --assume-unchanged 忽略的文件名 恢复本地忽略文件 git update-index --no-assume-unchanged ...

  4. Angular 学习笔记（一）

    什么是 Angular: Angular 是一个 JavaScript 框架,可通过 <script> 标签添加到 HTML 页面,然后通过指令扩展 HTML,且通过表达式绑定数据到 HT ...

  5. python3.5.3rc1学习二

    #if else示例x = 5y = 8 if x > y: print("x is greater than y")else: print("x is not g ...

  6. 解决飞秋绑定TCP错误

    电脑不能打开网页,局域网的飞秋不能运行:提示TCP/IP错误,错误事件代码:10106.重装TCP/IP协议后就OK了…… 步骤如下:1.删除这两个注册表选项:(打开注册表命令regedit.如果不能 ...

  7. 题解：T103180 しろは的军训列队

    题目链接 solution: 按题目随便假设找到了一个x,它的位置的ap,属性bp 看下图 $$$$$$$$$$$$$$$$|||||P &&&&&&& ...

  8. luoguP3975 [TJOI2015]弦论

    题意 第一问有一个经典做法:学习笔记 对于第二问,其实就是对于一个状态的所有串,第一问看成一个,第二问看成多个. code: #include<bits/stdc++.h> using n ...

  9. unique_ptr的实现原理

    在C++11中有两个智能指针类型来管理动态对象,share_ptr允许多个指针指向同一个对象,unique_ptr则“独占”所指对象. 我们知道指针或引用在离开作用域时是不会进行析构的,但是类在离开作 ...

  10. Java文件上传的几种方式

    文件上传与文件上传一样重要.在Java中,要实现文件上传,可以有两种方式: 1.通过Servlet类上传 2.通过Struts框架实现上传 这两种方式的根本还是通过Servlet进行IO流的操作. 一 ...