Vue.js学习系列（二十五）-- 循环语句（一）
来源：互联网 发布：php类与对象person 编辑：程序博客网 时间：2024/06/06 01:21
Vue.js的循环语句使用v-for指令来实现。V-for类似js的遍历
1.遍历整数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="src/vue.min.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="i in 5">
{{i}}
</li>
</ul>
</div>
<script type="text/javascript">
new Vue({
el:"#app",
})
</script>
</body>
</html>
运行结果：
2.遍历数组
用法为 v-for="item in items", items是数组，item为数组中的数组元素。
使用v-for来绑定数据到数组中渲染一个列表。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="src/vue.min.js"></script>
</head>
<body>
<div id="app">
<ol>
<li v-for="site in sites">
{{site.name}}
</li>
</ol>
</div>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
sites:[
{name:'京东'}, {name: '淘宝' },
{name: '天猫' }]
}
})
</script>
</body>
</html>
运行结果如下：
将数组中元素显示在一个列表上。
- Vue.js学习系列（二十五）-- 循环语句（一）
- Vue.js学习系列（二十六）-- 循环语句（二）
- Vue。js学习系列（二十四）--条件语句（二）
- Vue.js学习系列（六）---条件与循环
- Vue.js学习系列（二十七）-- 计算属性（一）
- Vue.js学习系列（十九）--常用指令（二）
- Vue.js学习系列（四十一）-- 修饰符（二）
- Vue.js学习系列（二）---配置开发环境
- Vue.js学习系列（二十一）--修饰符
- Vue.js学习系列（二十二）--过滤器
- Vue.js学习系列（十七）--常用指令（一）
- Vue.js学习系列（四十）-- 修饰符（一）
- Vue.js学习系列（一）---配置开发环境
- Vue.js学习系列（三十一）-- Vue.js样式绑定（二）
- Vue.js学习系列（三十八）-- Vue.js表单 （二）
- Vue---条件语句和循环语句（二）
- Vue.js学习系列（三十）-- Vue.js样式绑定（一）
- Vue.js 学习（二）
- 【随笔】关于坚持
- elasticsearch 查询（match和term）
- python 画图--饼图
- Stuts2国际化
- 支持POST方式的webbench
- Vue.js学习系列（二十五）-- 循环语句（一）
- 排序-插入排序
- MySQL 最最简单命令---- 慢慢收集
- 区块链学堂（第三课）：以太坊生产网络/测试网络/私有网络+Geth 搭建私有网络实战
- MySQL权限
- uml在线画图共享网站
- 数字签名RSA
- 第七届蓝桥杯java 搭积木
- ViewPager+Fragment的使用
