<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>列表渲染指令v-for</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="book in books">{{ book.name }}</li>
</ul>
<!-- v-for 的表达式支持一个可选参数作为当前项的索引，of 可以替换成 in -->
<ul>
<li v-for="(book,index) of books">{{ index }} - {{ book.name }}</li>
</ul>
</div>
<!--与v-if一样，v-for 也可以用在内置标签<template>上，将多个元素进行渲染-->
<div id="app2">
<ul>
<template v-for="book in books">
<li>书名：{{ book.name }}</li>
<li>作者：{{ book.author }}</li>
</template>
</ul>
</div>
<!--对象属性也可以遍历-->
<div id="app3">
<span v-for="value in user">{{ value }}</span>
</div>
<div id="app4">
<ul>
<li v-for="(value, key , index) in user">
{{ index }} - {{ key }} : {{ value }}
</li>
</ul>
</div>
<!-- v-for 还可以迭代整数 -->
<div id="app5">
<span v-for="n in 10">{{ n }}</span>
</div>
<!--自动识别最新稳定版本的Vue.js-->
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
var app = new Vue({
el:'#app',
data:{
books:[
{name:'《Vue.js 实战》'},
{name:'《老人与海》'},
{name:'《雾都孤儿》'}
]
}
})
</script>
<script>
var app = new Vue({
el:'#app2',
data:{
books:[
{
name:'《活着》',
author:'余华'
},
{
name:'《巴黎圣母院》',
author:'雨果'
},
{
name:'《4321》',
author:'保罗·奥斯特'
}
]
}
})
</script>
<script>
var app = new Vue({
el:'#app3',
data:{
user:{
name:'Rina',
gender:'女',
age:18
}
}
})
</script>
<script>
var app = new Vue({
el:'#app4',
data:{
user:{
name:'Maco',
gender:'女',
age:25
}
}
})
</script>
<script>
var app = new Vue({
el:'#app5'
})
</script>
</body>
</html>
条件渲染指令3.png
网友评论