您现在的位置：首页 >> 前端 >> 内容

v-for指令代码使用实例

时间：2017/11/8 14:32:39 点击：

　　核心提示：v-for指令可以绑定数组的数据来渲染一个项目列表：htmlheadtitle/titlescript src=https://unpkg.com/vue/script/headbodyp id=ap...

v-for指令可以绑定数组的数据来渲染一个项目列表：

<html>
<head>
    <title></title>
    <script src="https://unpkg.com/vue"></script>
</head>
<body>
    <p id="app">
        <li v-for="todo in todos">
            {{ todo.text }}
        </li>
    </p>
<script type="text/javascript">
    var app = new Vue({
    el: '#app',
    data: {
        todos: [
                { text: '学习JavaScript' },
                { text: '学习Vue' },
                { text: '整个牛项目' }
            ]
        }
    })
</script>
</body>
</html>

在控制台输入app.todos.push({ text: '新项目' })，页面列表就会多出一项。