},
deep: true
}
},
methods: {
toggleFinished: function(item) {
item.isfinished = !item.isfinished
},
show:function ($event) {
$event.cancelBubble=true;
this.isBlock = false;
this.topPx = ($event.clientY);
this.leftPx = ($event.clientX);
},
stop:function(event){
this.isBlock = true;
},
moveBtn:function(item) {
// console.log(item.label)
item.isShow = true;
},
leaveBtn:function(item) {
item.isShow = false;
},
addNew: function() {
//非空才可以添加
if(this.newItem!=''){
this.items.push({
label: this.newItem,
isfinished: false
})
}
this.newItem = '';
},
moveUp:function(index,item) {
//在上一项插入该项
this.items.splice(index-1,0,(this.items[index]));
//删除后一项
this.items.splice(index+1,1);
item.isShow = false;
if(index == 0) {
alert("到顶啦！");
}
},
moveDown:function(index,item) {
//在下一项插入该项
this.items.splice(index+2,0,(this.items[index]));
// 删除前一项
this.items.splice(index,1);
item.isShow = false;
if(index == this.items.length-1) {
alert("已经是最后一项啦！");
}
},
deleteBtn:function(index) {
this.items.splice(index,1);
}
},
}
</script></span><span style="font-size: 18px;">
</span>
套路就是在html中插入方法或者class，methods中对数据进行操作～
总结：
这是本小白入门vue.js学习的第一个demo，有一些jQuery的观念不能很好的转变，总是习惯性的操作dom节点，殊不知vue可以有更好的方式去实现
以上所述是小编给大家介绍的Vue.js实现一个todo-list的上移下移删除功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对软件开发网网站的支持！
