<!DOCTYPE html>
 <html>
 <head>
     <meta charset="utf-8">
     <title></title>
     <link rel="stylesheet" type="text/css" href="vue.css">
     <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
 </head>
 <body>
     <div id="vue-app">
         <h1> v-for 循环</h1>
         <!--数组下标-->
         {{    characters[0] }}
         {{    characters[1] }}
         {{    characters[2] }}
         <!--数组遍历-->
         <ul>
                 <li v-for="character in characters">
                     {{character}}
                 </li>
         </ul>
 <hr>
     <ul>
         <li v-for="user in userMsg" style="list-style: none;">
             {{ user }} - {{ user.name }} - {{ user.age }}
         </li>
     </ul>
     <hr>

     <ul><!-- index 默认其实位置是：0 -->
         <li v-for="(user,index) in userMsg" style="list-style: none;">
             {{ index }} - {{ user.name }} - {{ user.age }}
         </li>
     </ul>
     <h3><使用 div+v-for/h3>
         <div v-for="(user,index) in userMsg" >
             <h3>{{ index+1 }} . {{ user.name }}</h3>
             <p>&nbsp;Age: {{ user.age }}</p>
         </div>
     <hr>
     <h3>使用template+v-for</h3>
     <template v-for="(user,index) in userMsg">
         <h3>{{ index+1 }}.{{ user.name }}</h3>
         <p>&nbsp;Age:{{ user.age }}</p>
     </template>
     以上两种情况 有什么不同？
      查看html便知

      <h3>使用template+v-for 再加 内 循环 v-for</h3>
     <template v-for="(user,index) in userMsg">
             <div v-for="(value,key) in user">
                 {{ key }}-{{ value }}
     </template>
     </div>

     <script src="app.js"></script>
 </body>
 </html>

HTML

 new Vue({
     el:'#vue-app',
     data:{
         characters:['Mario','Luffy','Yoshi'],
         userMsg:[
             {name:"Henry",age:30},
             {name:"Bucky",age:30},
             {name:"Emily",age:30},
         ],
     },
     methods:{

     },
     computed:{

     }
 })

Vue.js

Vue 数组 字典 template v-for 的使用的更多相关文章

  1. vue 数组和对象渲染问题

    vue 数组和对象渲染问题 最近项目有点忙碌,遇到好多问题都没有总结(╥﹏╥),在开发过程中,取vuex中的数组渲染完成之后,再次修改数组的值,数据更新了,但是视图并没有更新.以为是数组更新的问题,后 ...

  2. @proprety数组字典字符串用copy和strong区别（深浅拷贝）

    ////  @proprety数组字典字符串用copy和strong区别(深浅拷贝).h//  IOS笔记//// /* _proprety________copy_strong_________h ...

  3. .net Mvc Controller 接收 Json/post方式 数组 字典 类型 复杂对象

    原文地址:http://www.cnblogs.com/fannyatg/archive/2012/04/16/2451611.html ------------------------------- ...

  4. Swift语法基础入门二(数组, 字典, 字符串)

    Swift语法基础入门二(数组, 字典, 字符串) 数组(有序数据的集) *格式 : [] / Int / Array() let 不可变数组 var 可变数组 注意: 不需要改变集合的时候创建不可变 ...

  5. Python学习笔记5-字符串、bool、数值操作和数组字典排序

    1.字符串 # 字符串数字之间转换 # x = int("6") # print type(x) #<type 'str'> # y = str(6) # print ...

  6. NSNumber(把数字存进数组字典等的问题)

    官方文档地址https://developer.apple.com/library/ios/documentation/Cocoa/Reference/Foundation/Classes/NSNum ...

  7. [one day one question] Vue数组变更不能触发刷新

    问题描述:Vue数组变更不能触发刷新,特别是数组的每个元素都是对象的时候,对象中某个属性的值发生变化,根本无法触发Vue的dom刷新,这怎么破? 解决方案:this.$set(array, index ...

  8. vue 数组渲染问题

    vue 数组渲染问题 问题一: 用v-for循环渲染数组数据时,数据更新了,视图却没有更新 由于 JavaScript 的限制, Vue 不能检测以下变动的数组: 1. 当你利用索引直接设置一个项时, ...

  9. vue数组变异方法

    Vue数组变异方法,会改变被这些方法调用的原始数组,将会触发视图更新 push() 接收任意数量的参数,把它们逐个添加到数组末尾,并返回修改后数组的长度 pop() 从数组末尾移除最后一项,减少数组的 ...

随机推荐

  1. oracle函数大全-字符处理函

    字符函数——返回字符值 这些函数全都接收的是字符族类型的参数(CHR 除外)并且返回字符值.除了特别说明的之外,这些函数大部分返回VARCHAR2类型的数值.字符函数的返回类型所受的限制和基本数据库类 ...

  2. week06 07 创建RPC SERVER 换个镜像安装下载

    RPC server 使用python类库 https://pypi.org/project/python-jsonrpc/ 和NPM 不一样 他没有global选项 他安装的就是全局的安装的类库叫p ...

  3. 使用__future__实现从python2.7到python3.x的过渡

    参考链接:http://www.liaoxuefeng.com/wiki/001374738125095c955c1e6d8bb493182103fac9270762a000/001386820023 ...

  4. Oracle 未能加载文件或程序集Oracle.DataAccess

    原文地址;https://www.cnblogs.com/xuekai-to-sharp/p/3586071.html 关键是引用DLL:Oracle.DataAccess.dll DLL文件的路径: ...

  5. 编程四剑客awk

    awk  'pattern +{action}' file (1)AWK基本语法参数详解 a:单引号 ''是为了和shell命令区分开: b:大括号{}表示一个命令分组: c:pattern 是一个过 ...

  6. uigetfile的用法（批量读取图片）

    matlab编程中有时想调入电脑中的某个文件,现找到了一些关于uigetifile用法~~[filename, pathname] = uigetfile( ...    {'*.jpg;*.tif; ...

  7. 1.3.8、CDH 搭建Hadoop在安装之前(端口---Apache Flume和Apache Solr使用的端口)

    Apache Flume和Apache Solr使用的端口 Apache Flume用于与Apache Solr通信的端口可能会有所不同,具体取决于您的配置以及是否使用安全性(例如,SSL).使用Fl ...

  8. node-rsa

    [node-rsa] 引用 var NodeRSA = require('node-rsa') 生成一个私钥长度为512的key(同时生成公钥) var key = new NodeRSA({b: 5 ...

  9. appium API接口

    appium API接口 标签(空格分隔): appium常用api 1.contexts contexts(self) 返回当前会话的上下文,使用可以识别H5页面的控件: driver.contex ...

  10. ftp删除目录和文件，目录下有文件删除提示【550 Remove directory operation failed.】

      注意:目录下有文件,直接删除目录会失败,提示550 Remove directory operation failed. 必须先将目录下的文件都删除,才能删除目录   ftp命令行: ftp删除目 ...