<!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. mongodb的优缺点

    在这里收集下我自己对Mongodb的一些优缺点方面的认识,或者是通过其它比较可靠的网文上引用或者摘录的作为依据,这个是一个渐进的过程,也是随着我对Mongodb认识的加深而不断扩展的. (1)Mong ...

  2. 身份证号码 正则表达式 jquery

    现在的身份证为18位(最后一位可以是数字,可以是x,可以是X),老的身份证是15位(纯数字). 所以正则是: /(^\d{15}$)|(^\d{17}[\d|x|X]$)/ 扩展: 1 正则表达式的创 ...

  3. Win2012&Win2008双系统启动菜单设置

    电脑最初安装的是XP,后来想升级操作系统,但XP里又有很多常用软件不想重装,于是装了一个Win2008 R2的双系统,安装好2008R2后,系统自动产生一个2008R2的启动菜单,可以选择进入2008 ...

  4. Android文档 学习目录

    Building Your First App After you've installed the Android SDK, start with this class to learn the b ...

  5. RPM安装命令总结

    RPM安装命令总结 在 Linux 操作系统下,几乎所有的软件均通过RPM 进行安装.卸载及管理等操作.RPM 的全称为Redhat Package Manager ,是由Redhat 公司提出的,用 ...

  6. 学JS的心路历程-函式（六）其余参数及预设参数

    今天我们要来介绍ES6新增的其余参数及预设参数! 其余参数rest parameter …numbers可以让我们表示不确定数量的参数,并将其视为一个数组: function getVal(…numb ...

  7. vuex this.$store.state.属性和mapState的属性中的一点点区别

    做泰康公众号的项目时候有一个需求创建公众号的时候后台有一个社区id提供给后台展现人员和部门,在群发消息时候也要给后台一个社区id只不过获取社区的id接口和上一个不是一样的,本来在页面中写了两个sele ...

  8. css 响应式布局

    移动端最让人闹心的就是在不同的手机要做错响应式布局适应各种手机,开始自己做这方面走了很多的弯路,响应式布局如果是部件,就按实际的大小单位px等设置,像宽可以按照百分比计算,长的可以百分比.auto 或 ...

  9. multi_compile

    [multi_compile]  Used to  compile the shader code multiple times with different preprocessor directi ...

  10. python网络编程之开启进程的方式

    标签(空格分隔): 开启进程的方式 multiprocessing模块介绍: python中的多线程无法利用多核优势,如果想要充分地使用多核CPU的资源(os.cpu_count()查看),在pyth ...