vuejs绑定列表

上一篇文章，介绍了如何通过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事件。

vuejs绑定列表

推荐阅读更多精彩内容