您的位置：首页 > 产品设计 > UI/UE

vue.js 入门案例 my todos

2016-12-12 22:09 423 查看

<html>
<head>
<title>project</title>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-default navbar-static-">
<div class="container" id="app">
<div class="row">
<div class="clo-md-4 clo-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">Welcome Vue js 2.0</div>
<div class="panel-body">

<h1>my todos</h1>
<ul class="list-group">
<li class="list-group-item" v-for="(todo,index) in todos">{{todo.title}}
<button class="btn btn-warning btn-xs pull-right" v-on:click="deleteTodo(index)">Delete</button>
</li>
</ul>

<form v-on:submit.prevent="addTodo(newTodo)">
<div class="form-group">
<input type="text" v-model="newTodo.title" class="form-control" placeholder="Add a new todo">
</div>
<div class="from-group">
<button class="btn btn-success" type="submit">Add todo</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</nav>

</body>
<script src="vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
message:'hello world',
//数组
todos:[{id:1,title:'go to school'}],
newTodo:{id:null,title:''}
},
methods:{
addTodo(newTodo){
this.todos.push(newTodo)
this.newTodo={id:null,title:''}
},
deleteTodo(index){
//  this.todos.$remove(todo)   删除
this.todos.splice(index,1)
}
}
})

/*
v-on:submit.prevent 的 prevent 是阻止默认提交事件;
addTodo(newTodo){} 等同 addtodo:function(){};
this.todos.push(newTodo) 将newTodo添加到todos里
this.newTodo={id:null,title:''} 添加完成后input里为空

*/
</script>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： vue-js

相关文章推荐

新的分享

章节导航