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() 从数组末尾移除最后一项,减少数组的 ...
随机推荐
- LeetCode OJ 47. Permutations II
题目 Given a collection of numbers that might contain duplicates, return all possible unique permutati ...
- [PHP]基于角色的访问控制RBAC
---------------------------------------------------------------------------------------------------- ...
- SQL调用C# dll（第二中DLL，强名称密匙）
参考:微软官网 https://msdn.microsoft.com/zh-cn/library/ms345106(es-es).aspx 1.新建项目 SQLDllTestUsingNew Clas ...
- ajax 执行代码顺序
异步:ajax执行过程中,ajax后面的代码也执行了,程序没按顺序走 同步:ajax执行完毕后再执行后面的代码,程序顺序执行 在jq中ajax默认是异步的 当设置async:false表示的就是同步的 ...
- 根据获取的窗口句柄遍历窗口Edit控件
网上说遍历窗口控件有两种方法: 1),使用EnumChildWindows,没有深究, 学习网址如下:http://blog.sina.com.cn/s/blog_60ac1c4b010116 ...
- 什么是JIT，写的很好
什么是JIT 一些其他解释的网站:http://www.sohu.com/a/169704040_464084 1.动态编译(dynamic compilation)指的是“在运行时进行编译”:与之相 ...
- float double 如何存储
类型float大小为4字节,即32位,内存中的存储方式如下: 符号位(1 bit) 指数(8 bit) 尾数(23 bit) 类型double大小为8字节,即64位,内存布局如下: 符号位(1 ...
- MATLAB GUI图片添加背景
global im [filename,pathname]=uigetfile('*.jpg','输入图片'); file=strcat(pathname,filename); im=imread(f ...
- iview 表单验证
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...
- 使用JavaMail发送邮件-no object DCH for MIME type multipart/mixed报错解决
最近需要实现一个使用Spring schedule按一定时间间隔自动触发条件发送邮件的功能,在开发的过程中,是按照先测试能发出text/html文本邮件,然后测试添加附件发送邮件,我碰到的问题是,文本 ...