vue的v-for循环普通数组、对象数组、对象、数字
如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="vue.js"></script>
</head>
<body>
<!--容器-->
<div id="app">
<!--循环数组-->
<span v-for="(u,i) in user">|||{{u}}--索引{{i}}|||</span>
<!--循环对象数组--><br>
<span v-for="(u,i) in object">---{{u.a}}---索引：{{i}}</span>
<!--循环对象--><br>
<span v-for="(val,key,i) in app">---值：{{val}}---键{{key}}----索引：{{i}}</span>
<!--循环数字--><br>
<span v-for="count in 10">{{count}}</span>
</div> <script>
// 创建一个vue实例
var vm=new Vue({
el:'#app', // 绑定id为appid容器
data:{
user:[1,2,3,4,5],
object:[
{"a":1},
{"a":2},
{"a":3}
],
app:{
"a":1,
"b":2,
"c":3
}
}
})
</script>
</body>
</html>
效果：效果有点丑，见谅
vue的v-for循环普通数组、对象数组、对象、数字的更多相关文章
- Vue组件模板形式实现对象数组数据循环为树形结构
数据结构为数组中包含对象--树形结构,用Vue组件的写法实现以下的效果: 树形列表,缩进显示层级,第5级数据加底色,数据样式显色,点击展开折叠数据.本文为用Vue实现方式,另有一篇为用knockout ...
- JavaScript基础精华03(String对象,Array对象,循环遍历数组,JS中的Dictionary,Array的简化声明)
String对象(*) length属性:获取字符串的字符个数.(无论中文字符还是英文字符都算1个字符.) charAt(index)方法:获取指定索引位置的字符.(索引从0开始) indexOf(‘ ...
- 关于 vue 不能 watch 数组变化 和 对象变化的解决方案
原文地址:关于 vue 不能 watch 数组变化 和 对象变化的解决方案 vue 监听数组和对象的变化 vue 监听数组 vue 实际上可以监听数组变化,比如: data () { return { ...
- vue中，对象数组多层嵌套时，更新数据更新页面
vue中的对象和数组的元素直接赋值修改时,是不能响应到view中去的 1.对象更新 this.a={title:'列表1’}; this.a.title='列表2’; <h1>{{a.ti ...
- 对象数组和for循环遍历输出学生的信息
public class Student { private int no; private String name; private int age; public Student(int no, ...
- vue : watch、computed、以及对象数组
watch和computed是vue框架中很重要的特性. 那么,他们是怎么作用于对象数组的? 今天我们就来探究一下. 上代码. <template> <div class=" ...
- 对象数组和对象对象数组的for-each循环
对象数组的声明 类名称 对象数组名[] = null: 对象数组名 = new 类名称[长度] 定义并开辟数组 类名称 对象数据名[] = new 类名称[长度]; 在声明一个对象数组后,必须对每个数 ...
- vue 接口 对象数组的传入传出
数组传入 对象的话用{...obj} <selectFile :tableData="[...tableData]" @uploadSuccess="data =& ...
- 1、C#基础：变量、运算符、分支、循环、枚举、数组、方法 <转>
转自:海盗船长 链接:http://www.cnblogs.com/baidawei/p/4701504.html#3241882 C#..Net以及IDE简介 一.什么是.Net? .Net指 .N ...
随机推荐
- oc字符串截取 数组字典运用
#define NSLog(FORMAT, ...) printf("%s\n", [[NSString stringWithFormat:FORMAT, ##__VA_ARGS_ ...
- 博学谷-数据分析numpy
import numpy as np print np.version.version np.array([1,2,3,4]) np.arange(15) np.array(range(10)) = ...
- 6- vue django restful framework 打造生鲜超市 -完成商品列表页(下)
Vue+Django REST framework实战 搭建一个前后端分离的生鲜超市网站 Django rtf 完成 商品列表页下 drf中的request和response drf对于django的 ...
- 三十、MySQL 处理重复数据
MySQL 处理重复数据 有些 MySQL 数据表中可能存在重复的记录,有些情况我们允许重复数据的存在,但有时候我们也需要删除这些重复的数据. 本章节我们将为大家介绍如何防止数据表出现重复数据及如何删 ...
- PHP 二维数组某个字段进行排序
/** * @param $arrUsers * @return mixed *二维数组某个字段进行排序 */ function quick_sort($arrUsers) { $sort = arr ...
- unix gcc编译过程
gcc编译过程 现代编译器常见的编译过程: 源文件-->预处理-->编译/优化-->汇编-->链接-->可执行文件 对于gcc而言: 第一步 预处理 命令: ...
- [Uva623]500！(高精)
Description 求N! \(N \leq 1000\) Sample Input 10 30 50 100 Sample Output 10! 3628800 30! 265252859812 ...
- Jconsole连接Tomcat JVM
修改java虚拟机启动参数 在%TOMCAT_HOME%\bin\catalina.sh文件的最顶端 JAVA_OPTS=”-Dcom.sun.management.jmxremote.port=10 ...
- datagrid的基本属性&查询和清空功能的实现
1.datagrid基本属性 <script charset=UTF-8"> $(function(){ $("#datagrid").datagrid({ ...
- mysql 分组查询前n条数据
今天去面试,碰到一道面试题: 有一个学生成绩表,表中有 表id.学生名.学科.分数.学生id .查询每科学习最好的两名学生的信息: 建表sql: CREATE TABLE `stuscore` ( ` ...