<!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. ES6必会重点汇总

    当下的前端开发已经成为一项非常流行的技能.在这个领域中,ES6是一个重要的主题.ES6是ECMAScript 2015的缩写,是JavaScript语言的下一个版本,引入了很多新的语言特性和API,让 ...

  2. 群论中的 Lagrange 定理

    今天跟 hym 打球时讲到了这个东西,突然发现证明拉格朗日定理的思想有许多跟轨道-稳定集定理很像,所以这里又记录一下. 为了证明 Lagrange 定理,我们需要了解一些关于子群和陪集的性质. 首先给 ...

  3. springcloud~Sentinel

    介绍 随着微服务的流行,服务和服务之间的稳定性变得越来越重要.Sentinel 是面向分布式.多语言异构化服务架构的流量治理组件,主要以流量为切入点,从流量路由.流量控制.流量整形.熔断降级.系统自适 ...

  4. thinkphp常量定义

    是已经封装好的系统常量 主要是用在控制器下面的动作当中 这样能很大的提高我们的开发效率主要有下面的一些     手册上面都有的     __ROOT__ 网站的根目录     __APP__ 代表项目 ...

  5. #Python assign赋值，新增列操作

  6. 2022-04-26：给定一个数组componets，长度为A， componets[i] = j，代表i类型的任务需要耗时j 给定一个二维数组orders，长度为M， orders[i][0]代表i

    2022-04-26:给定一个数组componets,长度为A, componets[i] = j,代表i类型的任务需要耗时j 给定一个二维数组orders,长度为M, orders[i][0]代表i ...

  7. 2022-07-10：以下go语言代码输出什么？A：A，B；B：A，C：A，fatal error；D：fatal error... func main() { var m sync.Mute

    2022-07-10:以下go语言代码输出什么?A:A,B:B:A,C:A,fatal error:D:fatal error- func main() { var m sync.Mutex fmt. ...

  8. ESLint: More than 1 blank line not allowed. (no-multiple-empty-lines)

    ESLint: More than 1 blank line not allowed. (no-multiple-empty-lines)

  9. ODOO配置属性

    2字段的属性 2.1 隐藏字段 <field name='model_name' invisible="True"/> 2.2 条件下隐藏 <field name ...

  10. Intellij IDEA最新激活码,适合2022,2023和所有版本,永久更新

    分享一下 IntelliJ IDEA 2023.1 最新激活注册码,破解教程如下,可免费永久激活,亲测有效,下面是详细文档哦~ 申明:本教程 IntelliJ IDEA 破解补丁.激活码均收集于网络, ...