vue.js 入门案例 my todos

57 阅读 0 评论 38 点赞

我是靠谱客的博主腼腆糖豆，最近开发中收集的这篇文章主要介绍vue.js 入门案例 my todos，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

<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>