如图，A simple todo-list长这样
这是一个基于vue.js的一个简单的todo-list小demo。首先要实现添加非空list，点击list切换finished状态这样的一个效果，推荐学习地址—->点击打开链接
接下来是实现的一个上移，下移，删除的效果图：
删除效果：
讲一下思路：
上移—–首先将鼠标所指list的内容插入到上一条上面，然后删除鼠标所指的list（也就是this.items[index]），运行代码便可实现上移的效果，或者将上下两条list的内容进行调换也是可以的。
删除—–这里和上下移一样，主要是用到了操作数组的splice这个方法，既可以添加也可以删除，不懂的去补一下
小二～上代码：
—-App.vue—-
<div><input v-model="newItem" v-on:keyup.enter="addNew"></div>
<div class="box-center">
<ul class="box-list">
<li v-for="item ,index in items" v-bind:class="{finished:item.isfinished}" v-on:mouseover="moveBtn(item)" v-on:mouseout="leaveBtn(item)">
<span v-on:click="toggleFinished(item)" v-bind:class="{bgYellow:item.isBgyellow}">{{item.label}}</span>
<span class="list-btn" v-show="item.isShow">
<button v-on:click="moveUp(index,item)">上移</button>
<button v-on:click="moveDown(index,item)">下移</button>
<button v-on:click="deleteBtn(index)">删除</button>
</span>
</li>
</ul>
t;/div>
—-Store.js—-
const STORAGE_KEY = 'todos-vuejs'
export default {
fetch () {
return JSON.parse(window.localStorage.getItem(
STORAGE_KEY) || '[]')
},
save (items) {
window.localStorage.setItem(STORAGE_KEY,JSON.stringify(
items))
}
}
----App.vue----
<span style="font-size:14px;"><script>
import Store from './store'
export default {
data: function() {
return {
title: 'A simple todo-list',
items: Store.fetch(),
newItem: '',
msg:'点击按钮',
isShow: false,
isBlock: true,
isBgyellow: false,
leftPx:0,
topPx:0
}
},
watch: {
items: {
handler: function(items) {
Store.save(items)
