vuejs绑定列表

作者: webCoder | 来源:发表于2016-01-29 16:25 被阅读1881次

vuejs绑定列表
Vuejs 样式绑定
vuejs 数据绑定
vuejs属性绑定
解读:Object.defineProperty
Vue表单与v-model
VueJS 语法
vuejs 数据绑定原理
vuejs—数据双向绑定
vuejs如何实现数据双向绑定与 Object.defineP

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

页面执行效果：