<!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. SQL Server 2022 AlwaysOn新特性之包含可用性组介绍

    由于技术能力有限,文章仅能进行简要分析和说明,如有不对的地方,请指正,谢谢. SQL Server的容灾功能一直弱于Oracle和MySQL,无法自动同步元数据(用户.登录名.权限.SQL 代理作业. ...

  2. ChatGPT在工业领域的研究与应用探索-数据与工况认知

    1.      ChatGPT发展现状... 2 2.      ChatGPT如何与工业相结合... 2 3.      ChatGPT在工业领域的研究与应用... 3 1.   ChatGPT发展 ...

  3. 2022-12-17：订单最多的客户。以下数据，结果输出3。请问sql语句如何写？ DROP TABLE IF EXISTS `orders`； CREATE TABLE `orders` ( `

    2022-12-17:订单最多的客户.以下数据,结果输出3.请问sql语句如何写? DROP TABLE IF EXISTS `orders`; CREATE TABLE `orders` ( `or ...

  4. 2022-06-01：给定一个数组arr，可能有正、有负、有0，无序。 只能挑选两个数字，想尽量让两个数字加起来的绝对值尽量小。 返回可能的最小的值。

    2022-06-01:给定一个数组arr,可能有正.有负.有0,无序. 只能挑选两个数字,想尽量让两个数字加起来的绝对值尽量小. 返回可能的最小的值. 答案2022-06-01: 排序,双指针. 代码 ...

  5. 2022-01-05：有四种诗的韵律分别为: AABB、ABAB、ABBA、AAAA。 比如 : 1 1 3 3就属于AABB型的韵律、

    2022-01-05:有四种诗的韵律分别为: AABB.ABAB.ABBA.AAAA. 比如 : 1 1 3 3就属于AABB型的韵律.6 6 6 6就属于AAAA型的韵律等等, 一个数组arr,当然 ...

  6. 【保姆级教程】如何用Rust编写一个ChatGPT桌面应用

    为什么我们需要一个桌面应用 原因实在太多,我们需要便捷地导出记录,需要在回答长度超长的时候自动加上"继续",需要收藏一些很酷很实用的prompt...... (首先我假设你是一名如 ...

  7. Jenkins - 页面汉化

    Jenkins - 页面汉化 前言 对于不懂英文的人来讲,尤其是第一次使用Jenkins环境,看全英文的Jenkins页面是十分困难的: Jenkins对于不懂英文的用户有做汉化的插件包,但是汉化的不 ...

  8. protoBuf 实现客户端与服务端

    转载请注明出处: 1.定义消息格式 在 src/main/proto 目录下创建 person.proto 文件,并定义消息格式,例如: syntax = "proto3"; pa ...

  9. nc工具利用

    c: 瑞士军刀/网络测评工具    将本地的cmd 权限移交到外网 nc工具:应用    本地cmd打开, 输入  nc -e cmd 远程ip  5577  #连接到远程ip的5577 远程cmd打 ...

  10. How to boot the Raspberry Pi system from a USB Mass Storage Device All In One

    How to boot the Raspberry Pi system from a USB Mass Storage Device All In One 如何从 USB 启动树莓派引导系统 / 如何 ...