<!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. 如何使用JBDC修改数据

    1.JDBC取得数据库Connection连接对象conn, Connection conn=null;   //数据库连接对象 String strSql=null;    //sql语句对象 // ...

  2. idea中pom文件需要添加的依赖

    <!-- 如果不添加此节点mybatis的mapper.xml文件都会被漏掉. --> <!-- IDEA的maven项目中,默认源代码目录下的xml等资源文件并不会在编译的时候一块 ...

  3. Hibernate 再接触 基础配置 搭建Log4j环境 Junit日志环境等

    <!-- Drop and re-create the database schema on startup --> <property name="hbm2ddl.aut ...

  4. C# 图像处理:将图像(24位真彩)转为 8位灰度图像 采用了内存法,大大提高了效率

    /// <summary> /// 将源图像灰度化,并转化为8位灰度图像. /// </summary> /// <param name="original&q ...

  5. C# windows服务：通过cmd命令安装、卸载、启动和停止Windows Service（InstallUtil.exe）

    步骤: 1.运行--〉cmd:打开cmd命令框 2.在命令行里定位到InstallUtil.exe所在的位置 InstallUtil.exe 默认的安装位置是在C:/Windows/Microsoft ...

  6. js高级-数组的map foreach 方法

    函数式编程  sort map forEach  ....  jQuery() 数组的sort 方法 传入一个匿名函数 就是函数式编程 ie9 以上的浏览器支持 map 方法 map方法 返回一个新数 ...

  7. KMP与AC自动机模板

    HDU 1711 Number Sequence(KMP模板题) http://acm.hdu.edu.cn/showproblem.php?pid=1711 #include<bits/std ...

  8. Netty 能做什么

    作为一个学Java的,如果没有研究过Netty,那么你对Java语言的使用和理解仅仅停留在表面水平,会点SSH,写几个MVC,访问数据库和缓存,这些只是初等Java程序员干的事.如果你要进阶,想了解J ...

  9. c# 用户页面

    第一步: 第二步: 第三步: 结果:

  10. unity延时方法

    http://www.cnblogs.com/louissong/p/3832960.html 借鉴上面的博客中的内容: Invoke(methodName: string, time: float) ...