vue 上下键li_Vue实现点击箭头上下移动效果

{{item.name}}

//i

↓

↑

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)

}

})

$set(检测数组的变动)

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

html代码

vue .js部分

var vm = new Vue({

el:'#app',

data:{

show:true,

methods:{

ptOpenDowOrUp:function () {

vm.show = !vm.show

}

})

总结

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

vue 上下键li_Vue实现点击箭头上下移动效果相关推荐

vue列表左右箭头滑动_Vue实现点击箭头上下移动效果
{{item.name}} //i ↓ ↑ Vue.config.productionTip = false//不去提示 new Vue({ el: "#app", data() ...
vue实现点击箭头的旋转动画（收起展开）效果
实现方法:用vue动态绑定class的方法,实现用不同的class渲染箭头,达到点击箭头的旋转效果模板的内容: //这里是箭头图片 <img :class="{ 'arrowTran ...
vue点击左右箭头左右滑动效果
点击左右箭头左右滑动效果代码: <template><div class="vertical-scroll-wrap"><svg class=&qu ...
Vue 框架-02-事件：点击, 双击事件,鼠标移上事件
Vue 框架-02-事件:点击, 双击事件,鼠标移上事件 1.单击事件:v-on:click 源码 app2.js : //实例化 vue 对象 new Vue({//注意代码格式//el:eleme ...
Vue监听滚动条事件点击回到顶部
Vue监听滚动条事件点击回到顶部监听滚顶条事件: created () {this.listenerFunction(); }, beforeDestroy () {document.remove ...
vue组件弹出框点击显示隐藏
1. vue组件弹出框点击显示隐藏转载于:https://www.cnblogs.com/knuzy/p/9525852.html
vue的methods里面的函数使用箭头函数
Vue里面methods对象里面如果使用箭头函数会导致this指向不是vue实例,而是一个xxx.a的一个类,尽量不要在vue所定义的字段里面使用箭头函数. 由此可见,vue中的自带方法使用箭头函数会 ...
js点击箭头旋转的实现
我们经常可以在网页中看到向下的箭头,并且在我们点击时,箭头会发生旋转,这又是如何做到的呢?我们来看一看,先上效果图: 可以看到,在点击箭头时,箭头的方向旋转了,并且再次点击回到原来的样子,我们看一看代 ...
vue中防止按钮重复点击提交的方法
vue中防止按钮重复点击提交的方法 vue中防止按钮重复点击提交的方法一.自定义全局指令二.自定义局部指令三.动态控制disabled属性 vue中防止按钮重复点击提交的方法经常会遇到的一个问 ...

vue 上下键li_Vue实现点击箭头上下移动效果

vue 上下键li_Vue实现点击箭头上下移动效果相关推荐

最新文章

热门文章