<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>演示数组迭代</title>
</head>
<body>
<div id="app">
<button onclick="vm.todos.push({text:'一个新项目'})">增加</button>
<input type="button" value="添加" @click="add">
<ol>
<li v-for="todo in todos">{{todo.text}}</li>
</ol>
</div>
<script src="../js/vue.js"></script>
<script>
let vm = new Vue({
el:'#app',
data:{
todos:[
{text:'学习JavaScript'},
{text:'学习vue'},
{text:'整个超级牛的项目'}
]
},
methods:{
add(){
this.todos.push({text:'其他项目'});
}
}
});
</script>
</body>
</html>
该代码示例展示了如何在Vue.js环境中对数组进行迭代操作，包括动态添加新的待办事项。当点击按钮时，使用`push`方法向`todos`数组添加新条目，这会自动更新视图中的列表。此外，还定义了一个`add`方法来实现相同的功能。
扫一扫
1851
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
