怎样使用 v-for ?
v-bind / v-on / v-if / v-for , 这四个指令应该是 vue 里面最常用的了, 之前已经简单记录的前三个的使用方法, 接下来就记一下 v-for 的基本用法.
1. v-for 需要使用 x in xs 的这种写法, 类似 for i in rangeA 循环, xs 代表需要循环创建的数据源, 所有可迭代对象, 包括一般对象都是可以作为 v-for 的循环数据源的. 而 x 则是循环的当前数据的别名. 如下所示, 我们发现 v-for 中的数据源可以不是 vApp.$data 中的属性, 而可以是在全局作用域下的任何变量.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<title>Vue Test</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="i in names">{{ i }}</li>
</ul>
</div>
<script>
var names = ["李雷", "韩梅梅", "李强", "张伟", "张杰"];
var vApp = new Vue({
el: "#app"
})
</script>
</body>
</html>
2. 可以在 <template> 上使用 v-for, 渲染时 <template> 不会被渲染出来. 这在平时应该会经常被用到.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<title>Vue Test</title>
</head>
<body>
<div id="app">
<template v-for="i in names">
<img v-bind:src="i.avatar" alt=""> <strong>{{ i.name }}</strong>
<hr />
</template>
</div>
<script>
var names = [
{"name":"李雷","avatar":"https://images.cnblogs.com/cnblogs_com/aisowe/1536642/t_sister.jpg"},
{"name":"韩梅梅","avatar":"https://images.cnblogs.com/cnblogs_com/aisowe/1536642/t_sister.jpg"},
{"name":"李强","avatar":"https://images.cnblogs.com/cnblogs_com/aisowe/1536642/t_sister.jpg"}
];
var vApp = new Vue({
el: "#app"
})
</script>
</body>
</html>
3. v-for 也可以迭代对象中的数据, 注意, 这里的迭代会默认将值转换为字符串, 比如下面的 sayHello 是一个方法, 但被 toString() 为一个字符串. 注意这里 (value, key, index) in names 的用法. 这里的 index 很重要, 表示循环时的下标或当前次数.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<title>Vue Test</title>
</head>
<body>
<div id="app">
<p v-for="(value, key, index) in names">{{ index + 1 }}. {{ key }} : {{ value }}</p>
</div>
<script>
var vApp = new Vue({
el: "#app",
data: {
names: {
"name": "韩梅梅",
"avatar": "https://images.cnblogs.com/cnblogs_com/aisowe/1536642/t_sister.jpg",
"sayHello": function () { alert("hello") }
}
}
})
</script>
</body>
</html>
4. 此外, v-for 也可以迭代 整数 和 字符串, 这个感觉是用的不多的.~.~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<title>Vue Test</title>
</head>
<body>
<div id="app">
<p v-for="i in '李雷'">{{ i }}</p>
<p v-for="n in 3 ">{{ n }}</p>
</div>
<script>
var vApp = new Vue({
el: "#app"
})
</script>
</body>
</html>
5. 总结起来, v-for 跟 js 中的 for in 循环在行为上是高度相似的, 可以类比.
怎样使用 v-for ?的更多相关文章
- J a v a 的“多重继承”
接口只是比抽象类“更纯”的一种形式.它的用途并不止那些.由于接口根本没有具体的实施细节——也就是说,没有与存储空间与“接口”关联在一起——所以没有任何办法可以防止多个接口合并到一起.这一点是至关重要的 ...
- Exception in thread "main" java.lang.NoSuchMethodError: org.objectweb.asm.ClassWriter.<init>(I)V
在学习CGlib动态代理时,遇到如下错误: Exception in thread "main" java.lang.NoSuchMethodError: org.objectwe ...
- [Erlang 0118] Erlang 杂记 V
我在知乎回答问题不多,这个问题: "对你职业生涯帮助最大的习惯是什么?它是如何帮助你的?",我还是主动回答了一下. 做笔记 一开始笔记软件做的不好的时候就发邮件给自己, ...
- v$session中server为none与shared值解析
查询V$SESSION,你会看到SERVER可能会有DEDICATED| SHARED| PSEUDO| NONE 四种值,如果SERVER字段的值除了DEDICATED,还有NONE,则说明当前实例 ...
- 引用js或css后加?v= 版本号的用法
<span style="font-size:14px;">css和js带参数(形如.css?v=与.js?v= 或 .css?version=与.js?version ...
- 操作系统中的P,V操作(转)
无论是计算机考研.计算机软件水平考试.计算机操作系统期末考试还是其他计算机岗位考试,P.V原语操作都是一个常考点.下面笔者总结了关于P.V操作的一些知识. 信号量是最早出现的用来解决进程同步与互斥问题 ...
- 关于P,V操作理解的突破,关于并发设计与并行
今天又找了一篇博客研究P,V操作.. 发现..它有一个变量没有声明.. 我就换了篇博客..http://c.biancheng.net/cpp/html/2600.html 然后就看懂了.. 关键突破 ...
- XV Open Cup named after E.V. Pankratiev. GP of Tatarstan
A. Survival Route 留坑. B. Dispersed parentheses $f[i][j][k]$表示长度为$i$,未匹配的左括号数为$j$,最多的未匹配左括号数为$k$的方案数. ...
- XVII Open Cup named after E.V. Pankratiev. GP of SPb
A. Array Factory 将下标按前缀和排序,然后双指针,维护最大的右边界即可. #include<cstdio> #include<algorithm> using ...
- XVI Open Cup named after E.V. Pankratiev. GP of Ukraine
A. Associated Vertices 首先求出SCC然后缩点,第一次求出每个点能到的点集,第二次收集这些点集即可,用bitset加速,时间复杂度$O(\frac{nm}{64})$. #inc ...
随机推荐
- ELK(ElasticSearch, Logstash, Kibana) 实现 Java 分布式系统日志分析架构
一.首先理解为啥要使用ELK 日志主要分为三类:系统日志.应用程序日志和安全日志.系统运维和开发人员可以通过日志了解服务器软硬件信息.检查配置过程中的错误及错误发生的原因.通过分析日志可以了解服务器的 ...
- 微信小程序 图片裁剪
微信小程序 图片裁剪 分享一个微信小程序图片裁剪插件,很好用,支持旋转 文档:https://github.com/wyh19931106/image-cropper 1.json文件中添加image ...
- 数据结构之栈(stack)
1,栈的定义 栈:先进后出的数据结构,如下图所示,先进去的数据在底部,最后取出,后进去的数据在顶部,最先被取出. 栈常用操作: s=Stack() 创建栈 s.push(item) 将数据item放在 ...
- React入门----基础篇
React 背景介绍 React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站.做 ...
- Python多进程库multiprocessing创建进程以及进程池Pool类的使用
问题起因最近要将一个文本分割成好几个topic,每个topic设计一个regressor,各regressor是相互独立的,最后汇总所有topic的regressor得到总得预测结果.没错!类似bag ...
- AngularJS 指令(Directivce )一
指令(Directive),是AngularJS中一块比较重要的内容,在实践中,我们提倡将控制器(Controller)写得短小精悍,逻辑代码尽量少,要实现这种目的,我们主要通过将逻辑代码抽取到服务( ...
- 小D课堂 - 新版本微服务springcloud+Docker教程_3-05 服务注册和发现Eureka Server搭建实战
笔记 5.服务注册和发现Eureka Server搭建实战 简介:使用IDEA搭建Eureka服务中心Server端并启动,项目基本骨架介绍 官方文档:http://clou ...
- docker版的zabbix部署
环境准备:一台server端,两台agent端 server端部署zabbix-server和mariadb服务 agent端部署zabbix-agent服务 一.docker容器里下载zabbix和 ...
- Java 实现判断 主机是否能 ping 通
Java 实现判断 主机是否能 ping 通 代码实现如下: import java.io.IOException; import java.net.InetAddress; import java. ...
- Visual Studio Code 帮助查看器,指定的用于安装帮助内容的位置无效,或者您无权访问该位置
今天有个C# 类库文件里面的属性想要了解下,想到了Vs的帮助文档,其实也就是微软的MSDN:提示帮助查看器,指定的用于安装帮助内容的位置无效,或者您无权访问该位置: 最近两天vs也没有更新,并且也没有 ...