站内搜索:
首页 >> 前端 >> 内容
v-for指令代码使用实例

时间:2017/11/8 14:32:39

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: '新项目' }),页面列表就会多出一项。

  • 上一篇:需要在vue组件中使用axios向后台获取数据应该怎么办?
  • 下一篇:v-if有什么作用?v-if代码实例
  • 返回顶部