<!DOCTYPE html>

<html>

<head>

    <title>

    </title>

</head>

<body>

<div id="app">

    <ol>

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

        <li v-for="(item,index) in myClass">{{item.ename}}=={{index}}=={{item.cname}}</li>

    </ol>

</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<script type="text/javascript"></script>

<script type="text/javascript">

new Vue({

  el: '#app',

  data: {

    fruit:['apple','banana','orange'],

    myClass:[{ename:'apple',cname:'苹果'},{ename:'banana',cname:'香蕉'},{ename:'orange',cname:'橘子'},]

  }

})

</script>

</body>

</html>

Vue的for

加上v-bind:key="index(或者id)"可以调高vue的性能

<!DOCTYPE html>

<html>

<head>

    <title>

    </title>

</head>

<body>

<div id="app">

    <ol>

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

    </ol>

</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<script type="text/javascript"></script>

<script type="text/javascript">

//在原生js中使用

var obj={

    name:'张三',

    age:18,

    gender:'male'

}

for (var key in obj) {

    console.log(key,obj[key]);

}

new Vue({

  el: '#app',

  data: {

       obj

  }

})

</script>

</body>

</html>

Vue的key使用实例

2021-7-7 Vue的for使用实例的更多相关文章

  1. Vue中通过Vue.extend动态创建实例

    Vue中通过Vue.extend动态创建实例 在Vue中,如果我们想要动态地来控制一个组件的显示和隐藏,比如通过点击按钮显示一个对话框或者弹出一条信息.我们通常会提前写好这个组件,然后通过v-if = ...

  2. vue路由的简单实例

    vue2.0 和 vue1.0 路由的语法还是有点稍微的差别,下面介绍一下vue-router 2的简单实例: <!DOCTYPE html> <html lang="en ...

  3. Vue.2.0.5-Vue 实例

    构造器 每个 Vue.js 应用都是通过构造函数 Vue 创建一个 Vue 的根实例 启动的: var vm = new Vue({ // 选项 }) 虽然没有完全遵循 MVVM 模式, Vue 的设 ...

  4. Vue.js 基础指令实例讲解（各种数据绑定、表单渲染大总结）——新手入门、高手进阶

    Vue.js 是一套构建用户界面的渐进式框架.他自身不是一个全能框架--只聚焦于视图层.因此它非常容易学习,非常容易与其它库或已有项目整合.在与相关工具和支持库一起使用时,Vue.js 也能完美地驱动 ...

  5. vue单文件组件实例2：简单单文件组件

    ​ Introduce.vue: <template> <div class="intro"> 单位介绍 </div> </templat ...

  6. Vue使用的一些实例

    1.实现歌曲的点击切换. <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  7. Vue学习1：实例及生命周期

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 04: vue生命周期和实例属性和方法

    1.4 组件的生命周期 1.说明 1. Vue将组件看成是一个有生命的个体,跟人一样,定义了各个阶段, 2. 组件的生命周期:组件的创建过程 3. 组件生命周期钩子函数:当组件处在某个阶段,要执行某个 ...

  9. Vue.js Cookbook: 添加实例属性; 👍 axios（4万➕✨）访问API; filters过滤器;

    add instance properties //加上$,防止和已经定义的data,method, computed的名字重复,导致被覆写.//可以自定义添加其他符号. Vue.prototype. ...

  10. Vue.js教程--基础(实例 模版语法template computed, watch v-if, v-show v-for, 一个组件的v-for.)

    官网:https://cn.vuejs.org/v2/guide/index.html Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统. 视频教程:https: ...

随机推荐

  1. scrapy框架简介

    一.安装scrapy环境 -mac或linux:pip install scrapy -windows: 1.pip install wheel 2.pip install twinsted 3.pi ...

  2. python介绍、32位与64位系统的区别、python安装、pip管理安装包

    一.python的介绍 * python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆为了在阿姆斯特丹打发时间,决心开发一个新的脚本解释程序,作为 ...

  3. OpenResty学习笔记03：再探WAF

    一. 再谈WAF 我们上一篇安装的WAF来自另一位技术大神 赵舜东,花名 赵班长,一直从事自动化运维方面的架构设计工作.阿里云MVP.华为云MVP.中国SaltStack用户组发起人 .新运维社区发起 ...

  4. EasyExcel设置单元格边框

    /** * 单元格边框 * @return {@link HorizontalCellStyleStrategy} * @date 2021/10/26 13:22 * @author <a h ...

  5. 2020-10-13：hash与B+tree的区别？

    福哥答案2020-10-13: [答案来自知乎:](https://www.zhihu.com/question/425378511/answer/1522000015) 这里我从数据库索引的层面回答 ...

  6. 2021-06-29：在两个都有序的数组中找整体第K小的数。

    2021-06-29:在两个都有序的数组中找整体第K小的数. 福大大 答案2021-06-29: 1.A和B长度不等的时候,需要把A和B的长度变成相等. A是短数组,B是长数组. 第k小的数,k从1开 ...

  7. Grafana系列-统一展示-11-Logs Traces无缝跳转

    系列文章 Grafana 系列文章 概述 如前文 Grafana 系列 - 统一展示 -1- 开篇所述, Grafana 可以了解所有相关的数据--以及它们之间的关系--对于尽快根治事件和确定意外系统 ...

  8. 深入理解 python 虚拟机：魔术方法之数学计算

    深入理解 python 虚拟机:魔术方法之数学计算 在本篇文章当中主要给大家介绍在 python 当中一些常见的魔术方法,本篇文章主要是关于与数学计算相关的一些魔术方法,在很多科学计算的包当中都使用到 ...

  9. 使用Cordova插件实现两个app之间的相互调用和通讯

    几年前使用Cordova 进行两个app之间的相互调用和通讯:当时也是几经折腾,今天把它整理出来,理一下思路,也方便有同样需求的朋友参考 一.require引入 plugin require(&quo ...

  10. 基于Expression Lambda表达式树的通用复杂动态查询构建器——《构思篇一》

    在上一篇中构思了把查询子句描述出来的数据结构,那么能否用代码将其表达出来,如何表达呢? 再次回顾考察,看下面的查询子句: Id>1 and Id<10 如上所示,有两个独立的条件分别为Id ...