Vue 数组 字典 template v-for 的使用
<!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> 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> 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 的使用的更多相关文章
- vue 数组和对象渲染问题
vue 数组和对象渲染问题 最近项目有点忙碌,遇到好多问题都没有总结(╥﹏╥),在开发过程中,取vuex中的数组渲染完成之后,再次修改数组的值,数据更新了,但是视图并没有更新.以为是数组更新的问题,后 ...
- @proprety数组字典字符串用copy和strong区别（深浅拷贝）
//// @proprety数组字典字符串用copy和strong区别(深浅拷贝).h// IOS笔记//// /* _proprety________copy_strong_________h ...
- .net Mvc Controller 接收 Json/post方式 数组 字典 类型 复杂对象
原文地址:http://www.cnblogs.com/fannyatg/archive/2012/04/16/2451611.html ------------------------------- ...
- Swift语法基础入门二(数组, 字典, 字符串)
Swift语法基础入门二(数组, 字典, 字符串) 数组(有序数据的集) *格式 : [] / Int / Array() let 不可变数组 var 可变数组 注意: 不需要改变集合的时候创建不可变 ...
- Python学习笔记5-字符串、bool、数值操作和数组字典排序
1.字符串 # 字符串数字之间转换 # x = int("6") # print type(x) #<type 'str'> # y = str(6) # print ...
- NSNumber(把数字存进数组字典等的问题)
官方文档地址https://developer.apple.com/library/ios/documentation/Cocoa/Reference/Foundation/Classes/NSNum ...
- [one day one question] Vue数组变更不能触发刷新
问题描述:Vue数组变更不能触发刷新,特别是数组的每个元素都是对象的时候,对象中某个属性的值发生变化,根本无法触发Vue的dom刷新,这怎么破? 解决方案:this.$set(array, index ...
- vue 数组渲染问题
vue 数组渲染问题 问题一: 用v-for循环渲染数组数据时,数据更新了,视图却没有更新 由于 JavaScript 的限制, Vue 不能检测以下变动的数组: 1. 当你利用索引直接设置一个项时, ...
- vue数组变异方法
Vue数组变异方法,会改变被这些方法调用的原始数组,将会触发视图更新 push() 接收任意数量的参数,把它们逐个添加到数组末尾,并返回修改后数组的长度 pop() 从数组末尾移除最后一项,减少数组的 ...
随机推荐
- Angular2 web project UltraRacing （一，如何启动一个Angular项目？）
要稍等一会 切到目录看看 OK,生成很多文件 那么 我们来启动吧 出现下面信息说明成功 而且每次我们编译文件后 都会在cmd里面显示这个信息 说明他是热部署的 然后我们去浏览器看看 说明一切OK!
- java-学习4
一.八大数据类型—dataType 整型 1)byte 2)short 3)int 4)long 浮点型 5)float 6)double 字符型 7)char 布尔型 8)boolean 二.变量和 ...
- 3D 模型
http://www.imooc.com/article/12670
- 服务器安装pip
1. wget --no-check-certificate https://pypi.python.org/packages/source/s/setuptools/setuptools-19.6. ...
- NCBI之gene系列
1.基因系列中的data索引 2.基因ID之间的转换 对于生信,依托于别人的工具不如自己动手,由于研究发表的滞后性,往往很多工具提供的转换并不是最新的,况且开发者水平也参差不齐,理解原理才能让你来去自 ...
- Mesh.CombineMeshes
[Mesh.CombineMeshes] public void CombineMeshes(CombineInstance[] combine, bool mergeSubMeshes = true ...
- session of express
[session of express] 1.express-session 一个提供session功能库 npm install express-session --save var session ...
- unity中Android环境变量配置
http://www.cnblogs.com/windytrees/p/7533477.html
- day15模块内容
1.生成器表达式 先说三元表达式如下 res = [i for i in range(10) if 1 > 5] 这样res就是一个列表6,7,8,9] 只要在这个基础上稍加调整,如下 方括号改 ...
- 最完整Android Studio插件整理 (转)
转自:http://blog.csdn.net/alpha58/article/details/62881144 现在Android的开发者基本上都使用android Studio进行开发(如果你还在 ...