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() 从数组末尾移除最后一项,减少数组的 ...
随机推荐
- Logo tools
http://www.cilogo.com/LOGO/
- Hibernate 再接触 CRUD
1.save 一对多双向 package com.bjsxt.hibernate; import java.util.HashSet; import java.util.Set; import jav ...
- ansj
Ansj中文分词使用教程 Ansj中文分词使用教程:https://blog.csdn.net/a822631129/article/details/52331202 ansj分词史上最详细教程:ht ...
- Mac中使用pycharm引包matplotlib失败
最开始是使用matplotlib这个包,然后在pycharm中失败,然后在终端中pip install matplotlib,发现,安装了以后,pycharm依然找不到包. 代码如下: import ...
- Promise 学习
参考 https://www.jianshu.com/p/43f948051d65 // Promise里面传入一个函数类型的参数,这个函数类型的参数接收两个参数resolve reject var ...
- echart生成饼状图
//绘制图表. echarts.init(document.getElementById('main')).setOption({ tooltip : { trigger: 'item', //触发类 ...
- kubectl windows
https://storage.googleapis.com/kubernetes-release/release/v1.10.3/bin/windows/amd64/kubectl.exe
- php图片转base64
/*读取问价家图片生澈哥哥js文件 */header("Access-Control-Allow-Origin: *");$i=0;$handle = opendir('./ima ...
- Excel图标布局，图表样式，图标元素
一.图标布局----图表元素的增删改 * 快速布局: 更改图表的整体布局,主要是图表标题,坐标轴,图例,网格线 * 操作如下: 选中数据源,Ctrl+Q 出现图表,选中图表,在上方选择设计, 共有10 ...
- 贪吃蛇GamePanel Java实现(二)
package cn.tcc.snake.tcc.View; import java.awt.Color;import java.awt.Graphics; import javax.swing.JP ...