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


Posted in Javascript onJune 11, 2020

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

<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 点击箭头上下移动内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
用js实现上传图片前的预览(TX的面试题)
Aug 14 Javascript
javascript 得到文件后缀名的思路及实现
May 09 Javascript
浅谈被jQuery抛弃的函数及替代函数
May 03 Javascript
javascript中substring()、substr()、slice()的区别
Aug 30 Javascript
JQuery学习总结【二】
Dec 01 Javascript
JavaScript版经典游戏之扫雷游戏完整示例【附demo源码下载】
Dec 12 Javascript
BootStrap 下拉菜单点击之后不会出现下拉菜单(下拉菜单不弹出)的解决方案
Dec 14 Javascript
细说webpack源码之compile流程-rules参数处理技巧(1)
Dec 26 Javascript
详解通过源码解析Node.js中cluster模块的主要功能实现
May 16 Javascript
ng-repeat指令在迭代对象时的去重方法
Oct 02 Javascript
详解基于 Node.js 的轻量级云函数功能实现
Jul 08 Javascript
javascript实现京东快递单号的查询效果
Nov 30 Javascript
webpack+express实现文件精确缓存的示例代码
Jun 11 #Javascript
详解vue 组件
Jun 11 #Javascript
vue实现员工信息录入功能
Jun 11 #Javascript
JavaScript Event Loop相关原理解析
Jun 10 #Javascript
vue Element左侧无限级菜单实现
Jun 10 #Javascript
详解用js代码触发dom事件的实现方案
Jun 10 #Javascript
Vue中key的作用示例代码详解
Jun 10 #Javascript
You might like
thinkphp autoload 命名空间自定义 namespace
2015/07/17 PHP
PHP ADODB生成下拉列表框功能示例
2018/05/29 PHP
雄兵连第三季海报曝光,艾妮熙德成主角,蔷薇新造型
2021/03/09 国漫
Avengerls vs KG BO3 第二场2.18
2021/03/10 DOTA
IE与firefox之jquery用法区别
2008/10/03 Javascript
不要在cookie中使用特殊字符的原因分析
2010/07/13 Javascript
在网页中使用document.write时遭遇的奇怪问题
2010/08/24 Javascript
JS中使用Array函数shift和pop创建可忽略参数的例子
2014/05/28 Javascript
js动态改变select选择变更option的index值示例
2014/07/10 Javascript
js获取checkbox复选框选中的选项实例
2014/08/24 Javascript
js实现进度条的方法
2015/02/13 Javascript
初识angular框架后的所思所想
2016/02/19 Javascript
Jquery AJAX POST与GET之间的区别详细介绍
2016/10/17 Javascript
express文件上传中间件Multer详解
2016/10/24 Javascript
Angular实现一个简单的多选复选框的弹出框指令实例
2017/04/25 Javascript
vue axios请求拦截实例代码
2018/03/29 Javascript
[46:20]TFT vs Secret Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
python调用windows api锁定计算机示例
2014/04/17 Python
Python 读写文件的操作代码
2018/09/20 Python
widows下安装pycurl并利用pycurl请求https地址的方法
2018/10/15 Python
Python SMTP发送邮件遇到的一些问题及解决办法
2018/10/24 Python
python解析xml简单示例
2019/06/21 Python
pandas删除行删除列增加行增加列的实现
2019/07/06 Python
opencv resize图片为正方形尺寸的实现方法
2019/12/26 Python
Python 实现向word(docx)中输出
2020/02/13 Python
jupyter notebook指定启动目录的方法
2021/03/02 Python
如何使用amaze ui的分页样式封装一个通用的JS分页控件
2020/08/21 HTML / CSS
18岁生日感言
2014/01/12 职场文书
区三好学生主要事迹
2014/01/30 职场文书
酒鬼酒广告词
2014/03/21 职场文书
合同权益转让协议书模板
2014/11/18 职场文书
警示教育观后感
2015/06/17 职场文书
2016年领导干部正风肃纪心得体会
2015/10/09 职场文书
python使用openpyxl库读写Excel表格的方法(增删改查操作)
2021/05/02 Python
分析MySQL抛出异常的几种常见解决方式
2021/05/18 MySQL
Java 实战项目之家居购物商城系统详解流程
2021/11/11 Java/Android