<!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. python模拟线性回归的点

    构造符合线性回归的数据点 import numpy as np import tensorflow as tf import matplotlib.pyplot as plt # 随机生成1000个点 ...

  2. Winform 各种属性、方法、控件

    窗体是程序与用户交互的可视界面,窗体也是对象,窗体类定义了生成窗体的模版,实例化一个窗体类就产生了一个窗体. .NET框架类库的System.Windows.Forms命名空间中定义的Form类是所有 ...

  3. 源码编译安装Python3及问题解决

    https://chowyi.com/%E6%BA%90%E7%A0%81%E7%BC%96%E8%AF%91%E5%AE%89%E8%A3%85Python3%E5%8F%8A%E9%97%AE%E ...

  4. table 合并内容相同的第一列

    function mergeCells() { var tbodyTlth = $("#datatable_ajax1 tbody").find("tr").l ...

  5. MyBatis数据库连接的基本使用

    MyBatis部分: 本部分内容只主要体现Mybatis的特点. (1)MyBatis是什么? 开源的持久层框架,MyBatis的底层仍然是JDBC (2)编程步骤 step1 Maven项目 pom ...

  6. Java 获取一个字符串中,另一个字符串出现的次数

    Java 获取一个字符串中,另一个字符串出现的次数 思想: 1. indexOf到字符串中到第一次出现的索引2. 找到的索引+被找字符串长度,截取字符串3. 计数器++ 代码实现: public cl ...

  7. CRTD模拟MFG工单进行绑定优化

    需求:按单按库生产的CRTD状态半成品工单重复创建问题 绑定成功案例: SELECT DEMANDLINEID,SUPPLYORDERID,DEMANDORDERID,QTYALLOCATED,ITE ...

  8. scrapy 是指user_agent

    1.倒入random模块 2.在settings文件中添加useragent列表 MY_USER_AGENT = [ "Mozilla/4.0 (compatible; MSIE 6.0; ...

  9. django models返回数据根据某字段倒序排列

    例如有一个models表叫做report,report表中有一个endtime,想将结果按照endtime倒序排列   正序排列的方法:[models对象.objects.order_by(“字段名& ...

  10. Python Flask Jinja2模板引擎

    模板 简介 模板是一个包含响应文本的文件,其中包含用占位变量表示的动态部分,其具体值只在请 求的上下文中才能知道. 渲染 使用真实值替换变量,再返回最终得到的响应字符串,这一过程 称为渲染.为了渲染模 ...