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() 从数组末尾移除最后一项,减少数组的 ...
随机推荐
- python实现Excel删除特定行、拷贝指定行操作
工作中遇到的,本来用VBA写的,操作很慢,尝试用Python实现, 任务需求: 从原始的两张表中拷贝行到五张表中,如下表所示: source1和source2是一样的格式: one t ...
- 慕容小匹夫 Unity3D移动平台动态读取外部文件全解析
Unity3D移动平台动态读取外部文件全解析 c#语言规范 阅读目录 前言: 假如我想在editor里动态读取文件 移动平台的资源路径问题 移动平台读取外部文件的方法 补充: 回到目录 前言: 一 ...
- 如何跟踪某个session的SQL
1 oracle自带的sql trace程序可以跟踪本地session sys: alter system set sql_trace = true;对所有会话跟踪 schema: alter ses ...
- Python+Appium自动化环境搭建
appium工作原理 appium 在android端工作流 client端也就是我们 test script是我们的webdriver测试脚本. 中间是起的Appium的服务,Appium在服务端起 ...
- OnContextMenu实现禁止鼠标右键
OnContextMenu事件 定义和使用:oncontextmenu 事件在元素中用户右击鼠标时触发并打开上下文菜单.注意:所有浏览器都支持 oncontextmenu 事件, contextmen ...
- weblogic threadpool has stuck threads
https://blog.csdn.net/wyx713510713/article/details/12705221 最近项目启动时出问题,weblogic的nohup日志文件中找到下面一段(红色部 ...
- 更新linux下python版本
# 安装所有的开发工具包 yum groupinstall -y "Development tools" # 安装其它的必需包 yum install -y zlib-devel ...
- Java 几种锁
自旋锁 自旋锁顾名思义,它会等待一定时间(自旋),在这期中会什么都不做就是等资源被释放,好处在于没有了内核态用户态切换的效率损失,但是如果它一直不能访问到资源的话就会一直占用cpu资源,所以它会循环一 ...
- Python+Selenium学习--下拉框处理
场景 下拉框也是web 页面上非常常见的功能,webdriver 对于一般的下拉框处理起来也相当简单,要想定位下拉框中的内容,首先需要定位到下拉框:这样的二次定位 下拉框一般有以下两种方式: 鼠标移上 ...
- JAVA去重
JAVA中去掉空格 1. String.trim() trim()是去掉首尾空格 2.str.replace(" ", ""); 去掉所有空格,包括首尾.中间 ...