<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>循环语句</title>
<script src="js/vue.js"></script>
</head>
<body>
<!-- 循环使用 v-for 指令。
v-for 指令需要以 site in sites 形式的特殊语法, sites 是源数据数组并且 site 是数组元素迭代的别名。
v-for 可以绑定数据到数组来渲染一个列表: -->
<div id="app">
<ul>
<template v-for="site in sites">
<li>{{site.name}}</li>
<li>------</li>
</template>
</ul>
<!-- 迭代对象 -->
<br />
<ul>
<!-- <li v-for="value in object">
{{ value }}
</li> -->
<!-- <li v-for="(value,key) in object">
{{key}}:{{value}}
</li> -->
<li v-for="(value,key,index) in object">
{{index}}.{{key}}:{{value}}
</li>
<li v-for="n in 10">{{n}}</li>
</ul>
</div>
<script>
new Vue({
el: '#app',
data: {
sites: [{
name: 'ss'
}, {
name: 'ww'
}, {
name: 'qq'
}],
object: {
name: '菜鸟教程',
url: 'http://www.runoob.com',
slogan: '学的不仅是技术,更是梦想!'
}
}
})
</script>
</body>
</html>
Vue循环语句
最新推荐文章于 2023-04-20 07:15:00 发布