vuejs绑定列表
2016-01-29 本文已影响1881人
webCoder
上一篇文章，介绍了如何通过vue.js实现数据双向绑定，这篇文章将介绍如何通过其来绑定列表
列表在页面中很常见的一种结构，j2ee相关的jsp、php相关的smarty都支持在模板中遍历数组。
如何在vue.js中将列表数据展示在页面中呢？（不用jquery的遍历+拼接+append）
下面看代码，真的很简单：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>demo01</title>
<link rel="stylesheet" href="../css/base/bootstrap.min.css">
<link rel="stylesheet" href="../css/base/common.css">
</head>
<body>
<div class="container mt15" id="ul-lists">
<ul class="list-group" v-for="todo in todos">
<li class="list-group-item">{{ todo.text }}</li>
</ul>
</div>
<script src="../js/base/vue.js"></script>
<script src="../js/base/jquery.min.js"></script>
<script src="../js/base/bootstrap.min.js"></script>
<script>
new Vue({
el: '#ul-lists',
data: {
todos: [
{ text: 'Learn JavaScript' },
{ text: 'Learn Vue.js' },
{ text: 'Learn Angular.js' }
]
}
});
</script>
</body>
</html>
页面执行效果：
列表数据.png
下一篇文章，我们将会学习如何通过vue.js响应用户与页面元素的交互事件，比如最典型的click事件。
