Vue:v-for指令
来自CloudWiki
v-for 指令需要以 item in items 形式的特殊语法。常用来绑定数据对象。
最简单的例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="vue.js" type="text/javascript" charset="utf-8">
</script>
<title></title>
</head>
<body>
<div id="app">
<ul>
<li v-for="value in nums">{{value}}</li>
</ul>
</div>
<script src="Content/vue/dist/vue.js"></script>
<script type="text/javascript">
//ViewModel
var vue = new Vue({
el: '#app',
data: {
nums: [1, 2, 3, 4, 5, 6, 7, 8, 9]
}
});
</script>
</body>
</html>
除了基础数据之外，还支持Json数组的绑定。比如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="vue.js" type="text/javascript" charset="utf-8">
</script>
<title></title>
</head>
<body>
<div id="app">
<ul>
<li v-for="value in values">姓名：{{value.Name}}，年龄：{{value.Age}}</li>
</ul>
</div>
<script src="Content/vue/dist/vue.js"></script>
<script type="text/javascript">
//ViewModel
var vue = new Vue({
el: '#app',
data: {
values: [{ Name: "小明", Age: 20 }, { Name: "小刚", Age: 18 }, { Name: "小红", Age: 16 }]
}
});
</script>
</body>
</html>
在v-for里面，可以使用<template> 标签来渲染多个元素块，下面就基于bootstrap样式使用v-for、v-if、v-else等实现一个简单的demo。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="vue.js" type="text/javascript" charset="utf-8">
</script>
<title></title>
</head>
<body>
<div id="app">
<nav>
<ul class="pagination pagination-lg">
<template v-for="page in pages ">
<li v-if="page==1" class="disabled"><a href="#">上一页</a></li>
<li v-if="page==1" class="active"><a href="#">{{page}}</a></li>
<li v-else><a href="#">{{page}}</a></li>
<li v-if="page==pages"><a href="#">下一页</a></li>
</template>
</ul>
</nav>
</div>
<script src="Content/vue/dist/vue.js"></script>
<script type="text/javascript">
//ViewModel
var vue = new Vue({
el: '#app',
data: {
pages: 10
}
});
</script>
</body>
</html>
是不是很easy！需要说明一点的是，pages是10，然后遍历它的时候，page的值会从1依次到10。
v-for指令除了支持数据对象的迭代以外，还支持普通Json对象的迭代，比如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="vue.js" type="text/javascript" charset="utf-8">
</script>
<title></title>
</head>
<body>
<div id="app">
<ul>
<li v-for="(value, key) in values">
{{ key }} : {{ value }}
</li>
<li v-for="(value, key, index) in values">
{{ index }}. {{ key }} : {{ value }}
</li>
</ul>
</div>
<script src="Content/vue/dist/vue.js"></script>
<script type="text/javascript">
//ViewModel
var vue = new Vue({
el: '#app',
data: {
values: { Name: "小明", Age: 20, School: "**高中" }
}
});
</script>
</body>
</html>
