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

<ul>

        <li v-for="item in array">{{item}}</li><br>

        <li v-for="(item,index) in array">{{item}}--{{index}}</li><br>

        <li v-for="(value,key,index) in obj">{{value}}--{{key}}--{{index}}</li><br>

</ul>

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

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

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

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

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

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script src="./js/vue.js"></script>

</head>

<div id="app">

    <ul>

        <li v-for="item in array">{{item}}</li><br>

        <li v-for="(item,index) in array">{{item}}--{{index}}</li><br>

        <li v-for="(value,key,index) in obj">{{value}}--{{key}}--{{index}}</li><br>

    </ul><br>

    <ul>

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

    </ul>

</div>

<body>

    <script>

        let vm = new Vue({

            el: '#app',

            data: () => ({

                array: [

                    '王者荣耀', '和平精英', '绝地求生'

                ],

                obj: {

                    name: '何欣航', age: '18', height: '1.80'

                },

                list:['A','B','C','D','E']

            }),

            methods: {}

        })

    </script>

</body>

</html>

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script src="./js/vue.js"></script>

    <style>

        .active {

            background-color: yellowgreen;

        }

    </style>

</head>

<div id="app">

    <ul>

        <li v-for="(item,index) in game" v-on:click="getClass(index)" :class="{active:cindex===index}">{{item}}</li>

    </ul>

</div>

<body>

    <script>

        let vm = new Vue({

            el: '#app',

            data: () => ({

                game: ['王者荣耀', '和平精英', '炉石传说', '穿越火线'],

                cindex: 0

            }),

            methods: {

                getClass: function (index) {

                    this.cindex = index

                }

            }

        })

    </script>

</body>

</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. c语言的全排列

    在c语言中实现全排列,对于刚接触c语言,还没学习算法的人来说,比较困难了吧.估计大佬也不会看这种基础的东西,全排列实现的办法很多,在c++中有一个专门的函数可以使用,但是在c中实现就有点困难了.如果你 ...

  2. 海思屏幕HAL代码解析

    显示屏幕(LCD)模块提供屏幕相关功能接口,调用者为上层应用模块(含 init.状态机.ui),上下文依赖关系,如图 3-7 所示. 系统框架为 linux+Huawei LiteOS 双系统架构,媒 ...

  3. WindowsServer2003中IIS支持php的配置

    1．安装MySQL(没有特殊说明的就按照默认安装)选择 Custom 自定义安装点击"Change"更改 MySQL 安装目录(自定义)其他按照默认的下一步就可以 安装完成后会自动 ...

  4. centos安装php5、卸载php、安装php7

    这篇文章主要介绍了centos安装php5.卸载php.安装php7 ,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 首先安装php5很简单 yum install php 然后如果不 ...

  5. firefox56 版本中的 Selenium IDE 无法导出脚本问题

    firefox:56 Slenium IDE :3系列 问题:Selenium IDE 没有工具栏,无法导出录制的脚本,这给自动化测试工作带来了极大的不便. 解决办法:将firefox 降级 (只有5 ...

  6. 10.Java基础_IDEA的使用

    IDEA下项目结构: 项目->模块->包->java文件 流程图 1.创建一个空项目(JavaSE_Code) 选择Empty Project 输入项目名和路径 2.创建一个新模块 ...

  7. 阿里云ECS服务器，修改实例密码，查看CPU核数，内存，阿里云服务器关机了怎么办？

    新买的ECS服务器是没有密码的,需要重置密码(root,P@ssw0rd),并重启: 查看CPU核数和内存: 阿里云服务器关机了,不用怕,登录阿里云,可以启动和关闭

  8. Node.js Koa2开发微信小程序服务端

    1.promise.async.await const Koa = require('koa') const app = new Koa() // 应用程序对象 有很多中间件 // 发送HTTP KO ...

  9. Idea Intellij 终生破解版

    关于Idea Intellij 2018.3.2 破解问题,之前采用 jetbrains-agent.jar  破解,目前该插件已经失效,为了永久终生破解使用Idea,本篇文章提供JetbrainsI ...

  10. 基于Django的Rest Framework框架的认证组件

    0|1一.认证组件的作用 在一个程序中有一些功能是需要登录才能使用的,原生Django中的auth组件可以用来解决这个认证问题,drf框架中也有对应的认证组件来解决这个问题. models.py   ...