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中格式化時(shí)間短日期補(bǔ)0變兩位長(zhǎng)日期的方法2. 存儲(chǔ)于xml中需要的HTML轉(zhuǎn)義代碼3. javascript xml xsl取值及數(shù)據(jù)修改第1/2頁(yè)4. ASP刪除img標(biāo)簽的style屬性只保留src的正則函數(shù)5. asp知識(shí)整理筆記4（問(wèn)答模式）6. 怎樣才能用js生成xmldom對(duì)象，并且在firefox中也實(shí)現(xiàn)xml數(shù)據(jù)島？7. 小技巧處理div內(nèi)容溢出8. js的一些潛在規(guī)則使用分析9. ASP實(shí)現(xiàn)加法驗(yàn)證碼10. XML解析錯(cuò)誤：未組織好 的解決辦法
網(wǎng)公網(wǎng)安備