vue之v-for
vue.js 的循环渲染是依赖于 v-for 指令,它能够根据 vue 的实例里面的信息,循环遍历所需数据,然后渲染出相应的内容。它可以遍历数组类型以及对象类型的数据,js 里面的数组本身实质上也是对象,这里遍历数组和对象的时候,方式相似但又稍有不同。
对象遍历
value 是遍历得到的属性值,key 是遍历得到的属性名,index 是遍历次序,这里的 key/index 都是可选参数,如果不需要,这个指令其实可以写成 v-for="value in me";
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="demo">
<ul>
<li v-for="value in object">
{{ value }}
</li>
</ul>
</div>
<script>
var demo = new Vue({
el:'#demo',
data:{ object: {
firstName: 'John',
lastName: 'Doe',
age: 30
}
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="demo">
<div v-for="(value, key,index) in object">
{{ index }} : {{ key }} : {{ value }}
</div>
</div>
<script>
var demo = new Vue({
el:'#demo',
data:{ object: {
firstName: 'John',
lastName: 'Doe',
age: 30
}
}
})
</script>
</body>
</html>
数组遍历
数组遍历和对象遍历相类似,最大的不同点在于对象的 “key” 和 “index” 是一致的,所以这里我们只需要取一个 index 即可。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="demo">
<ul>
<li v-for="(item, index) in items" v-on:click="onclick(index)">{{index}}:{{item}}</li>
</ul>
</div>
<script>
var demo = new Vue({
el:'#demo',
data:{
items: ['apple', 'tomato', 'banana', 'watermelon']
},
methods:{
onclick(index){
alert(index);
}
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="demo">
<ul>
<li v-for="todo in items">
{{ todo.message}}
</li>
</ul>
<ul>
<li v-for="(item, index) in items">
{{ parentMessage }} - {{ index }} - {{ item.message }}
</li>
</ul>
</div>
<script>
var demo = new Vue({
el:'#demo',
data:{
parentMessage: 'Parent',
items: [
{ message: 'Foo' },
{ message: 'Bar' }
],
}
})
</script>
</body>
</html>
vue之v-for的更多相关文章
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十║Vue基础终篇:传值+组件+项目说明
缘起 新的一天又开始啦,大家也应该看到我的标题了,是滴,Vue基础基本就到这里了,咱们回头看看这一路,如果你都看了,并且都会写了,那么现在你就可以自己写一个Demo了,如果再了解一点路由,ajax请求 ...
- Vue基础(环境配置、内部指令、全局API、选项、内置组件)
1.环境配置 安装VsCode 安装包管理工具:直接下载 NodeJS 进行安装即可,NodeJS自带 Npm 包管理工具,下载地址:https://nodejs.org/en/download/安装 ...
- vue集成环信IM
vue 集成环信im 简单demo 环信AppKey:1106190415055331#test 测试账号: test1 123456 test2 123456 test3 123456 默 ...
- Vue main.js 文件中全局组件注册部分
在 \src\components\index.js 文件中export组件 import HeaderList from './HeaderList' import HeaderMenu from ...
- vue.js的ajax和jsonp请求
首先要声明使用ajax 在 router下边的 Index.js中 import VueResource from 'vue-resource'; Vue.use(VueResource); ajax ...
- 如何在Vue项目中使用Typescript
0.前言 本快速入门指南将会教你如何在Vue项目中使用TypeScript进行开发.本指南非常灵活,它可以将TypeScript集成到现有的Vue项目中任何一个阶段. 1.初始化项目 首先,创建一个新 ...
- vue基础响应式数据
1.vue 采用 v……vm……m,模式,v---->el,vm---->new Vue(实例),m---->data 数据,让前端从操作大量的dom元素中解放出来. 2.vue响应 ...
- vue.js 配置axios 用来ajax请求数据
* 用npm 安装 axios 切换到项目的根目录 npm install --save axios vue-axios * 在vue的入口文件./src/main.js 中引入axios, 添加2行 ...
- 第六十二篇:Vue的双向绑定与按键修饰符
好家伙,依旧是vue的基础 1.按键修饰符 假设我们在一个<input>框中输入了12345,我们希望按一下"Esc" 然后删除所有前面输入的内容,这时候,我们会用到按 ...
- 微信小程序探究
前段时间比较流行的微信小程序,因为一直没有所谓内测码也没具体关注.拖到现在正好借组内分享的时机来仔细了解一下微信小程序.了解一个新的事物无外乎从是什么(本质),怎么用(具体用法),为什么用(优缺点)来 ...
随机推荐
- Spring mvc:配置不拦截指定的路径
<!-- 访问拦截 --> <mvc:interceptors> <mvc:interceptor> <mvc:mapping path="/**/ ...
- pytonn04day
参考: https://docs.python.org/3/tutorial/datastructures.html#list-comprehensions 一列表 它是以[ ]括起来, 每个元素⽤用 ...
- (19)jQuery操作文本和属性
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>jq ...
- vue的理解
vue提供的MVVM框架模式的数据双向绑定,实现了HTML和js的代码分离,提高代码的维护性 vue.js的核心思想包括:数据驱动和组件化思想. 如果没有中间的ViewModel则关系图编程下面所示: ...
- 芯灵思SInA33开发板怎样烧写镜像文件
上一节已经制作好了linux镜像文件,现在将它烧入开发板中需要的工具有 * SINLINX-A33_qt-4.8.7_lcd1024x600_v3.1 #镜像文件 * PhoenixSuit #烧写工 ...
- lch 儿童围棋课堂 启蒙篇 (李昌镐 著)
第1章 了解围棋 第2章 无气不活 棋子的"气"第3章 有目数才能赢空第4章 常用术语第5章 吃子第6章 死活:眼第7章 死活:典型棋形第8章 布局:术语篇 第1章 了解围棋 (已 ...
- 理解Lambda表达式和闭包
了解由函数指针到Lambda表达式的演化过程 Lambda表达式的这种简洁的语法并不是什么古老的秘法,因为它并不难以理解(难以理解的代码只有一个目的,那就是吓唬程序员) #include " ...
- c++内存泄漏原因及解决办法(智能指针)
内存泄漏 由于疏忽或错误造成程序未能释放已经不再使用的内存的情况.内存泄漏并非指内存在物理上的消失,而是应用程序分配某段内存后,由于设计错误,失去了对该段内存的控制,因而造成了内存的浪费. 内存泄露的 ...
- 使用 Composer 查看 FastAdmin 项目 组件的版本
比如查看 ThinkPHP 的版本号. 使用命令 composer show topthink/* 显示如下,可以看到 ThinPHP 版本为 V5.0.12:
- TP5一对一、一对多关联模型的使用
文章表SQL CREATE TABLE `tp_article` ( `id` int(11) NOT NULL AUTO_INCREMENT COMMENT '主键ID', `title` varc ...