您的位置：首页 > 移动开发

IMWeb训练营-VUE-ToDoApp

2017-04-20 10:33 459 查看

时间太赶，简单写一个。

HTML结构

<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<link href="https://cdn.bootcss.com/normalize/6.0.0/normalize.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div id="app">
<div class="todo-box">
<p>{{ message }}</p>
<input
v-on:keyup.enter="addTodo"
v-model="newTodo"
type="text"
name="todo"
value=""
placeholder="What need to be done?" />
</div>

<div class="todo-content">
<ul>
<li v-for="item in todos">
<div class="todo-item">
<input type="checkbox">
<label> {{item.task}}</label>
</div>
</li>
</ul>
</div>
</div>
</body>
<script src="https://cdn.bootcss.com/vue/2.2.6/vue.js"></script>
</html>

CSS

<style>
#app{
width: 100%;
}
.todo-box{
text-align: center;
}

.todo-box p{
font-size: 30px;
}

.todo-box input{
padding: 0 20px;
font-size: 24px;
outline: none;
width: 300px;
height: 50px;
line-height: 50px;
}

.todo-content{
font-size: 24px;
width: 344px;
margin: 0 auto;
height: auto;
}

.todo-content ul{
list-style: none;
margin: 0;
padding: 0;
}

.todo-item{
width: 344px;
height: 50px;
line-height: 50px;
background: blueviolet;
border: 1px solid slategray;
}
</style>

JavaScript

// localStorage persistence
var STORAGE_KEY = 'todos-vuejs-2.0'
var todoStorage = {
fetch: function() {
var todos = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]')
todos.forEach(function(todo, index) {
todo.id = index
})
//
todoStorage.uid = todos.length
return todos
},
save: function(todos) {
localStorage.setItem(STORAGE_KEY, JSON.stringify(todos))
}
}
// app Vue instance
var app = new Vue({
el: '#app',
data: {
message: 'Vue Todo App',
newTodo: '',
todos: todoStorage.fetch()
},
methods: {
addTodo: function(){
// 检测无效输入
var value = this.newTodo && this.newTodo.trim()
if (!value) {
return
}
this.todos.push({
task: this.newTodo
})
this.newTodo = ''
}
}
})

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

标签：

相关文章推荐

新的分享

章节导航