Vue實(shí)現(xiàn)點(diǎn)擊箭頭上下移動(dòng)效果
<body> <div id='app'> <ul> <li v-for='(item,i) in list'>{{item.name}} //i<list.length-1 需要的是0,1,2,3 需要四個(gè)向上的箭頭 長(zhǎng)度為5 減1之后長(zhǎng)度為4 小于4就是0,1,2,3 <button v-show='i<list.length-1' @click='down(i)'>↓</button> <button v-show='i>0' @click='up(i)'>↑</button> </li> </ul> </div> <script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script><script> Vue.config.productionTip = false//不去提示 new Vue({ el: '#app', data() { return { list:[ {id:111,name:'aaa'}, {id:222,name:'bbb'}, {id:333,name:'ccc'}, {id:444,name:'ddd'} ] } }, methods:{ down(i){ let temp = this.list[i] this.$set(this.list,i,this.list[i+1]) this.$set(this.list,i+1,temp) }, up(i){ let temp = this.list[i] this.$set(this.list,i,this.list[i-1]) this.$set(this.list,i-1,temp) } } }) </script></body>
$set（檢測(cè)數(shù)組的變動(dòng)）
附錄：vue點(diǎn)擊實(shí)現(xiàn)箭頭的向上與向下
html代碼
<span v-if='show' @click='ptOpenDowOrUp()'></span> <span v-else></span>
vue .js部分
var vm = new Vue({ el:’#app’, data:{ show:true, }, methods:{ ptOpenDowOrUp:function () { vm.show = !vm.show }, } })
總結(jié)
到此這篇關(guān)于Vue實(shí)現(xiàn)點(diǎn)擊箭頭上下移動(dòng)效果的文章就介紹到這了,更多相關(guān)vue 點(diǎn)擊箭頭上下移動(dòng)內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！
相關(guān)文章：
1. ASP刪除img標(biāo)簽的style屬性只保留src的正則函數(shù)2. ASP基礎(chǔ)知識(shí)Command對(duì)象講解3. jsp+servlet簡(jiǎn)單實(shí)現(xiàn)上傳文件功能（保存目錄改進(jìn)）4. PHP循環(huán)與分支知識(shí)點(diǎn)梳理5. PHP設(shè)計(jì)模式中工廠模式深入詳解6. ASP中格式化時(shí)間短日期補(bǔ)0變兩位長(zhǎng)日期的方法7. ASP實(shí)現(xiàn)加法驗(yàn)證碼8. 詳細(xì)分析css float 屬性以及position:absolute 的區(qū)別9. 得到XML文檔大小的方法10. 詳解JSP 內(nèi)置對(duì)象request常見(jiàn)用法
網(wǎng)公網(wǎng)安備