html箭头随着点击而移动,Vue实现点击箭头上下移动效果的方法

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

发布时间：2020-07-02 15:38:11

来源：亿速云

阅读：229

作者：清晨

这篇文章主要介绍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实现点击箭头上下移动效果的方法的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注亿速云行业资讯频道！