<!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. MySQL系统变量配置基础

    本文出处:http://www.cnblogs.com/wy123/p/6595556.html MySQL变量的概念 个人认为可以理解成MySQL在启动或者运行过程中读取的一些参数问题,利用这些参数 ...

  2. 【原】linux学习路径

    1.  <<The Linux Command Line A Complete Introduction>> 2.  <<Advanced Programming ...

  3. JAVAWEB 一一ibatis（框架)

    ,升级版是mybatis,在配置文件里写sql语句对字段进行CURD) jar包 sqlMapConfig <?xml version="1.0" encoding=&quo ...

  4. Jsp基本语法 第二节

    关于JSP的声明   即在JSP页面定义方法或者变量: <%!Java代码%> 在JSP页面中执行的表达式:<%=表达式%>   这个里尤其注意不能以:结束 JSP页面生命周期 ...

  5. eclipse调试快捷键

    Eclipse中有如下一些和运行调试相关的快捷键. 1. [Ctrl+Shift+B]:在当前行设置断点或取消设置的断点.    2. [F11]:调试最后一次执行的程序.    3. [Ctrl+F ...

  6. Swift中的的注释

    1. Swift支持与OC中相同的     /**/  ./***/  不同点Swift支持 /*/**/ 这样的注释  ,多行注释 2. 直接双杠注释 // 单行注释 3. 利用 //MARK: 返 ...

  7. 吴裕雄 python 数据处理（3）

    import time a = time.time()print(a)b = time.localtime()print(b)c = time.strftime("%Y-%m-%d %X&q ...

  8. tabel 选中行变色和取当前选中行值等问题

    先把代码贴出来 $("#tableId tbody tr").mousedown(function () {        $('#tableId  tr').each(funct ...

  9. SPSS-相关分析

    相关分析(二元定距变量的相关分析.二元定序变量的相关分析.偏相关分析和距离相关分析) 定义:衡量事物之间,或称变量之间线性关系相关程度的强弱并用适当的统计指标表示出来,这个过程就是相关分析 变量之间的 ...

  10. echart生成饼状图

    //绘制图表. echarts.init(document.getElementById('main')).setOption({ tooltip : { trigger: 'item', //触发类 ...