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() 从数组末尾移除最后一项,减少数组的 ...
随机推荐
- 判断页面是否添加了W3C声明
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 在前台页面写java代码，导入java的包
- CSS 颜色
color属性可以指定HTML文本的颜色. HTML的颜色采用以下3种方式表示. RGB值 使用红色.绿色.蓝色等不同比例表示,如 1 rgb(100,90,90) 值在0~255之间. 十六进制编码 ...
- linux下卸载自带的JDK和安装想要的JDK
卸载 1.卸载用 bin文件安装的JDK方法: 删除/usr/java目录下的所有东西 2.卸载系统自带的jdk版本方法: 查看自带的jdk: #rpm -qa | grep gcj 看到如 ...
- 几个api看看
require nonull inline noinline crossinline
- React Mixins
[React Mixins] ES6 launched without any mixin support. Therefore, there is no support for mixins whe ...
- spring boot IDEA 开发微服务(二)
https://www.cnblogs.com/spaceud/p/8097934.html 参考以上微博,自己实际操作步骤如下: 1~开发准备 JDK:1.8 Spring Boot:2.1.0 S ...
- Linux初级入门（一）
Linux是一种开源电脑操作系统内核,它是一个用C语言写成,符合POSIX标准的类Unix操作系统.Linux最早是由芬兰黑客 Linus Torvalds为尝试在英特尔x86架构上提供自由免费的类U ...
- Trigger,Cursor
USE [Demo]GO /****** Object: StoredProcedure [dbo].[p_couser_Student] Script Date: 02/24/2014 20:43: ...
- XMPP openfire Smack 即时通讯
重新整理下这篇文章. 这篇文章的主要任务是使用AndroidStudio,通过Openfire,利用XMPP协议完成一个可以即时通讯.拥有好友系统的聊天软件. 一.服务器配置与相关库 理论不多说,只谈 ...