您好,登錄后才能下訂單哦!
如圖,A simple todo-list長(zhǎng)這樣
這是一個(gè)基于vue.js的一個(gè)簡(jiǎn)單的todo-list小demo。首先要實(shí)現(xiàn)添加非空list,點(diǎn)擊list切換finished狀態(tài)這樣的一個(gè)效果,推薦學(xué)習(xí)地址---->點(diǎn)擊打開鏈接
接下來是實(shí)現(xiàn)的一個(gè)上移,下移,刪除的效果圖:
刪除效果:
講一下思路:
上移-----首先將鼠標(biāo)所指list的內(nèi)容插入到上一條上面,然后刪除鼠標(biāo)所指的list(也就是this.items[index]),運(yùn)行代碼便可實(shí)現(xiàn)上移的效果,或者將上下兩條list的內(nèi)容進(jìn)行調(diào)換也是可以的。
刪除-----這里和上下移一樣,主要是用到了操作數(shù)組的splice這個(gè)方法,既可以添加也可以刪除,不懂的去補(bǔ)一下
小二~上代碼:
----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 ><script> import Store from './store' export default { data: function() { return { title: 'A simple todo-list', items: Store.fetch(), newItem: '', msg:'點(diǎn)擊按鈕', isShow: false, isBlock: true, isBgyellow: false, leftPx:0, topPx:0 } }, watch: { items: { handler: function(items) { Store.save(items) }, 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) { //在上一項(xiàng)插入該項(xiàng) this.items.splice(index-1,0,(this.items[index])); //刪除后一項(xiàng) this.items.splice(index+1,1); item.isShow = false; if(index == 0) { alert("到頂啦!"); } }, moveDown:function(index,item) { //在下一項(xiàng)插入該項(xiàng) this.items.splice(index+2,0,(this.items[index])); // 刪除前一項(xiàng) this.items.splice(index,1); item.isShow = false; if(index == this.items.length-1) { alert("已經(jīng)是最后一項(xiàng)啦!"); } }, deleteBtn:function(index) { this.items.splice(index,1); } }, } </script></span><span > </span>
套路就是在html中插入方法或者class,methods中對(duì)數(shù)據(jù)進(jìn)行操作~
總結(jié):
這是本小白入門vue.js學(xué)習(xí)的第一個(gè)demo,有一些jQuery的觀念不能很好的轉(zhuǎn)變,總是習(xí)慣性的操作dom節(jié)點(diǎn),殊不知vue可以有更好的方式去實(shí)現(xiàn)
以上所述是小編給大家介紹的Vue.js實(shí)現(xiàn)一個(gè)todo-list的上移下移刪除功能,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)億速云網(wǎng)站的支持!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。