VUE案例 todolist 上移下移置顶删除

来源：互联网发布：tensorflow get shape 编辑：程序博客网时间：2024/06/05 03:15

<!DOCTYPE html><html><head><meta charset="utf-8"><title>Vue案例  todolist 上移下移置顶 删除</title></head><script type="text/javascript" src="js/vue.js"></script><body><div id="app"><h1 v-text="title"></h1><input v-model="newText" type="text" v-on:keyup.enter='addNewList' /><ul>  <li v-for="(item,index) in items">{{item.text}} <button v-on:click="deleteBtn(index)">删除</button><button v-on:click="shangBtn(index,item)">上</button><button v-on:click="xiaBtn(index,item)">下</button><button v-on:click="zhiBtn(index,item)">直顶</button></li></ul></div></body><script>new Vue({el: '#app',data: {title: '我的第二个 todolist',items: [{id:1,text: "test1"}, {id:2,text: 'test2'}]},methods: {addNewList: function() {this.items.push({text: this.newText})this.newText = '';},deleteBtn: function(index) {this.items.splice(index, 1);},shangBtn:function(index,item){//在上一项插入该项    this.items.splice(index-1,0,(this.items[index]));    this.items.splice(index+1,1);    if(index===0){   alert("已经到底");      }},xiaBtn:function(index,item){this.items.splice(index+2,0,(this.items[index])); this.items.splice(index,1); },zhiBtn:function(index,item){this.items.splice(0,0,(this.items[index])); this.items.splice(index+1, 1);}}})</script></html>

全部代码直接引用Vue.js 就可以运行测试，也是我的学习日志吧

阅读全文

0 0

VUE案例 todolist 上移下移置顶 删除

VUE案例 todolist 上移下移置顶删除