Vue實現(xiàn)點擊箭頭上下移動效果
<body> <div id='app'> <ul> <li v-for='(item,i) in list'>{{item.name}} //i<list.length-1 需要的是0,1,2,3 需要四個向上的箭頭 長度為5 減1之后長度為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（檢測數(shù)組的變動）
附錄：vue點擊實現(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實現(xiàn)點擊箭頭上下移動效果的文章就介紹到這了,更多相關(guān)vue 點擊箭頭上下移動內(nèi)容請搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！
相關(guān)文章：
1. Spring Boot和Thymeleaf整合結(jié)合JPA實現(xiàn)分頁效果(實例代碼)2. 詳解Android studio 動態(tài)fragment的用法3. 什么是python的自省4. 解決Android studio xml界面無法預覽問題5. Springboot Druid 自定義加密數(shù)據(jù)庫密碼的幾種方案6. Vuex localStorage的具體使用7. php模擬實現(xiàn)斗地主發(fā)牌8. Vue封裝一個TodoList的案例與瀏覽器本地緩存的應用實現(xiàn)9. Spring MVC+ajax進行信息驗證的方法10. vue 使用localstorage實現(xiàn)面包屑的操作
網(wǎng)公網(wǎng)安備