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 实现复制到粘贴板的功能代码
May 13 Javascript
jquery提升性能最佳实践小结
Dec 06 Javascript
JS 实现点击a标签的时候让其背景更换
Oct 15 Javascript
angularjs 处理多个异步请求方法汇总
Jan 06 Javascript
javascript多物体运动实现方法分析
Jan 08 Javascript
jquery.form.js框架实现文件上传功能案例解析(springmvc)
May 26 Javascript
任意Json转成无序列表的方法示例
Dec 09 Javascript
JS实现点击表头表格自动排序(含数字、字符串、日期)
Jan 22 Javascript
js时间戳和c#时间戳互转方法(推荐)
Feb 15 Javascript
如何在JavaScript中优雅的提取循环内数据详解
Mar 04 Javascript
vue-cli3配置与跨域处理方法
Aug 17 Javascript
ES6的异步操作之promise用法和async函数的具体使用
Dec 06 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
也谈 PHP 和 MYSQL
2006/10/09 PHP
PHP 基于文件头的文件类型验证类函数
2012/05/01 PHP
php中将html中的br换行符转换为文本输入中的换行符
2013/03/26 PHP
ThinkPHP5.0框架结合Swoole开发实现WebSocket在线聊天案例详解
2019/04/02 PHP
php字符串函数 str类常见用法示例
2020/05/15 PHP
dotopAlert 提示用户需安装播放器的代码
2012/09/17 Javascript
JS函数实现动态添加CSS样式表文件
2012/12/15 Javascript
Extjs中通过Tree加载右侧TabPanel具体实现
2013/05/05 Javascript
Google 地图类型详解及示例代码
2016/08/06 Javascript
详解js加减乘除精确计算
2019/03/19 Javascript
Node使用Selenium进行前端自动化操作的代码实现
2019/10/10 Javascript
Python3读取UTF-8文件及统计文件行数的方法
2015/05/22 Python
Python中Django发送带图片和附件的邮件
2017/03/31 Python
Python装饰器实现几类验证功能做法实例
2017/05/18 Python
详解python中的线程
2018/02/10 Python
Python3获取拉勾网招聘信息的方法实例
2019/04/03 Python
Python 2/3下处理cjk编码的zip文件的方法
2019/04/26 Python
python实现局域网内实时通信代码
2019/12/22 Python
基于python实现语音录入识别代码实例
2020/01/17 Python
python中np是做什么的
2020/07/21 Python
中国领先的专业演出票务网:永乐票务
2016/08/29 全球购物
以工厂直接定价的传奇性能:Ben Hogan Golf
2019/01/04 全球购物
SCDKey德国:全球领先的数字游戏市场
2019/04/09 全球购物
美国购买体育、音乐会和剧院门票网站:SelectATicket
2019/09/08 全球购物
Nordgreen手表德国官方网站:丹麦极简主义手表
2019/10/31 全球购物
印度电子产品购物网站:Vijay Sales
2021/02/16 全球购物
Java如何格式化日期
2012/08/07 面试题
服装设计行业个人的自我评价
2013/12/20 职场文书
仓库门卫岗位职责
2013/12/22 职场文书
大学应届生的自我评价
2014/03/06 职场文书
中职三好学生事迹材料
2014/08/24 职场文书
世界卫生日宣传活动总结
2015/02/09 职场文书
学校端午节活动总结
2015/02/11 职场文书
中标通知书
2015/04/17 职场文书
上课迟到检讨书
2015/05/06 职场文书
婚礼父母致辞
2015/07/28 职场文书