1.由于作者水平有限，本文只涉及简单的：Vue以及Bulma
主要实现的功能是增加事件、删除事件、以及根据完成和未完成状态进行分栏显示
2.参考地址：
- bulma官网：bulma.io/
- Vue官网：vuejs.org/
- 首先要在HTML文件头引入文件
" class="hljs "> <link rel="stylesheet" href="./bulma.min.css">
4.然后就是代码部分：
//HTML部分
<div id="app">
<section class="hero is-dark">
<div class="hero-body">
<div class="container">
<p class="title">
待办事项卡
</p>
<p class="subtitle">
快乐、健康、努力、向上、冲啊
</p>
</div>
</div>
</section>
<div class="container">
<div class="columns " style="margin-top: 20px">
<div class="column is-one-fifth">
<input class="input is-primary is-rounded " type="text" placeholder="输入待办事项" v-model="inputValue">
</div>
<div class="column is-one-fifth">
<button class="button is-success is-light" @click="addTodo">添加待办</button>
</div>
</div>
</div>
<div class="container " style="margin-top: 30px">
<nav class="panel">
<p class="panel-heading">
未完成
</p>
<div class="columns is-multiline">
<div class="column is-one-quarter" v-for="todo in hasNotDo" :key="todo.id">
<div class="card">
<header class="card-header">
<p class="card-header-title">
TO DO
</p>
<a href="#" class="card-header-icon" aria-label="more options">
<button class="delete" @click="remove(todo.id)"></button>
</a>
</header>
<div class="card-content">
<div class="content">
{{todo.title}}
</div>
</div>
<footer class="card-footer">
<a href="JavaScript:;"
:class="['card-footer-item', todo.hasFinish ? 'has-text-success' : 'has-text-warning' ]">
{{todo.hasFinish? '已完成' : '未完成' }}
</a>
<a href="JavaScript:;" class="card-footer-item"
@click="toggleHasFinished(todo.id)">切换为{{todo.hasFinish? '未完成' : '已完成'}}</a>
</footer>
</div>
</div>
</div>
</nav>
<nav class="panel" style="margin-top: 80px">
<p class="panel-heading">
已完成
</p>
<div class="columns is-multiline">
<div class="column is-one-quarter" v-for="todo in hasDo" :key="todo.id">
<div class="card">
<header class="card-header">
<p class="card-header-title">
TO DO
</p>
<a href="#" class="card-header-icon" aria-label="more options">
<button class="delete" @click="remove(todo.id)"></button>
</a>
</header>
<div class="card-content">
<div class="content">
{{todo.title}}
</div>
</div>
<footer class="card-footer">
<a href="JavaScript:;"
:class="['card-footer-item', todo.hasFinish ? 'has-text-success' : 'has-text-warning' ]">
{{todo.hasFinish? '已完成' : '未完成' }}
</a>
<a href="JavaScript:;" class="card-footer-item"
@click="toggleHasFinished(todo.id)">切换为{{todo.hasFinish? '未完成' : '已完成'}}</a>
</footer>
</div>
</div>
</div>
</nav>
</div>
</div>
//Vue部分
<script>
const app = new Vue({
el: '#app',
data: {
inputValue: '',
todos: [
{
id: 1,
title: '写代码',
hasFinish: false
},
{
id: 2,
title: "早起",
hasFinish: false
}
]
},
methods: {
toggleHasFinished(id) {
this.todos = this.todos.map(todo => {
if (todo.id === id) {
todo.hasFinish = !todo.hasFinish;
}
return todo
})
},
remove(id) {
this.todos = this.todos.filter(todo => {
return todo.id !== id
})
},
addTodo() {
if (this.inputValue !== '') {
return this.todos.push({
id: Date.now(),
title: this.inputValue,
hasFinish: false
})
this.inputValue = ''
}
}
},
computed: {
hasDo() {
return this.todos.filter(todo => todo.hasFinish)
},
hasNotDo() {
return this.todos.filter(todo => !todo.hasFinish)
}
}
})
</script>
