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>
运行结果如下：
将数组中元素显示在一个列表上。
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
