这是一个使用mui+mint+vue2.x+vue-router+vuex+webpack制作的待办事项项目实例，样式使用了vue移动端mint ui框架，原生手机能力偏重于mui框架。该项目实现了以下功能：
①勾选按钮可以选择是否已完成；
②若已完成（被勾选），则字体变暗和被划去；若未完成（没有被勾选），则保持不变；
③每条待办事项可自由选择是否删除；
④可自由添加事务进入待办事项中，回车键效果一样；
⑤有数字提示总事项和未完成事项。
<<代码示例>>
```html
<template>
<div class="todo">
<div class="header">
<h1>待办事项</h1>
<div class="add">
<input type="text" placeholder="添加待办事项" v-model="
newTodo" @keyup.enter="addTodo">
</div>
</div>
<div class="content">
<ul>
<li v-for="(todo, index) in todos" :key="index">
<div class="checkbox">
<input type="checkbox" v-model="todo.do
ne" @change="updateTodo">
</div>
<div class="text" :class="{do
ne: todo.do
ne}">
{{ todo.text }}
</div>
<div class="delete" @click="deleteTodo">
<i class="iconfont icon-delete"></i>
</div>
</li>
</ul>
</div>
<div class="footer">
<div class="total">
总事项：{{ todos.length }}
</div>
<div class="
undone">
未完成：{{
undone }}
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
newTodo: '',
todos: [
{ text: '学习Vue', do
ne: false },
{ text: '学习Vuex', do
ne: false },
{ text: '学习Vue Router', do
ne: false }
]
}
},
computed: {
undone() {
return this.todos.filter(todo => !todo.do
ne).length
}
},
methods: {
addTodo() {
if (this.
newTodo.trim() === '') return
this.todos.push({ text: this.
newTodo, do
ne: false })
this.
newTodo = ''
},
updateTodo() {
localStorage.setItem('todos', JSON.stringify(this.todos))
},
deleteTodo() {
this.todos.splice(index, 1)
}
}
}
</script>
<style scoped>
.todo {
.header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
background-color: #42b983;
color: #fff;
h1 {
font-size: 20px;
font-weight: normal;
margin: 0;
}
.add {
flex: 1;
margin-left: 10px;
input {
width: 100%;
padding: 5px;
border: no
ne;
border-radius: 5px;
outli
ne: no
ne;
font-size: 16px;
}
}
}
.content {
ul {
list-style: no
ne;
margin: 0;
padding: 0;
li {
display: flex;
align-items: center;
padding: 10px;
border-bottom: 1px solid #eee;
.checkbox {
margin-right: 10px;
input {
width: 20px;
height: 20px;
}
}
.text {
flex: 1;
font-size: 16px;
&.do
ne {
color: #999;
text-decoration: li
ne-through;
}
}
.delete {
i {
font-size: 20px;
color: #999;
}
}
}
}
}
.footer {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
background-color: #eee;
.total, .
undone {
font-size: 16px;
}
}
}
</style>
```
扫一扫
2747
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
