Vue实现点击箭头上下移动效果

时间：2021-05-26


<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（检测数组的变动）

附录：vue点击实现箭头的向上与向下

html代码

<span class="iconfont icon-jiantouarrow486" v-if="show" @click="ptOpenDowOrUp()"></span> <span class="iconfont icon-jiantouarrow492" v-else></span>

vue .js部分

var vm = new Vue({ el:'#app', data:{ show:true, }, methods:{ ptOpenDowOrUp:function () { vm.show = !vm.show }, } })

总结

到此这篇关于Vue实现点击箭头上下移动效果的文章就介绍到这了,更多相关vue 点击箭头上下移动内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章