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 相关文章推荐
return false,对阻止事件默认动作的一些测试代码
Nov 17 Javascript
批量实现面向对象的实例代码
Jul 01 Javascript
原生javascript和jquery判断浏览器版本等信息
Jul 04 Javascript
JavaScript sup方法入门实例(把字符串显示为上标)
Oct 20 Javascript
jQuery分组选择器用法实例
Dec 23 Javascript
JS控制表格实现一条光线流动分割行的方法
Mar 09 Javascript
JavaScript实现的简单拖拽效果
Jun 01 Javascript
JavaScript判断数组重复内容的两种方法(推荐)
Jun 06 Javascript
原生JS实现的放大镜效果实例代码
Oct 15 Javascript
将jquery.qqFace.js表情转换成微信的字符码
Dec 01 jQuery
layui 富文本编辑器和textarea值的相互传递方法
Sep 18 Javascript
Vue OpenLayer 为地图绘制风场效果
Apr 24 Vue.js
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 伪静态隐藏传递参数名的四种方法
2010/02/22 PHP
PHP jQuery表单,带验证具体实现方法
2014/02/15 PHP
PHP实现格式化文件数据大小显示的方法
2015/01/03 PHP
常用js脚本
2006/12/03 Javascript
javascript 函数调用的对象和方法
2010/07/01 Javascript
Javascript Throttle &amp; Debounce应用介绍
2013/03/19 Javascript
结合JQ1.9通过js正则判断各种浏览器版本的方法
2013/12/30 Javascript
使用Node.js处理前端代码文件的编码问题
2016/02/16 Javascript
JS实现按钮添加背景音乐示例代码
2017/10/17 Javascript
js实现复制功能(多种方法集合)
2018/01/06 Javascript
vue学习笔记五:在vue项目里面使用引入公共方法详解
2019/04/04 Javascript
Node对CommonJS的模块规范
2019/11/06 Javascript
微信小程序中使用 async/await的方法实例分析
2020/05/06 Javascript
jQuery实现的分页插件完整示例
2020/05/26 jQuery
JS script脚本中async和defer区别详解
2020/06/24 Javascript
Vue仿Bibibili首页的问题
2021/01/21 Vue.js
Python递归遍历列表及输出的实现方法
2015/05/19 Python
python抽象基类用法实例分析
2015/06/04 Python
Python学习笔记整理3之输入输出、python eval函数
2015/12/14 Python
python使用str &amp; repr转换字符串
2016/10/13 Python
解决Django数据库makemigrations有变化但是migrate时未变动问题
2018/05/30 Python
利用python将图片版PDF转文字版PDF
2019/05/03 Python
Django框架静态文件使用/中间件/禁用ip功能实例详解
2019/07/22 Python
PyQt5+Caffe+Opencv搭建人脸识别登录界面
2019/08/28 Python
Python流程控制 if else实现解析
2019/09/02 Python
Python使用sys.exc_info()方法获取异常信息
2020/07/23 Python
基于Python的图像阈值化分割(迭代法)
2020/11/20 Python
python 获取计算机的网卡信息
2021/02/18 Python
CHARLES & KEITH台湾官网:新加坡时尚品牌
2019/07/30 全球购物
业务代表的岗位职责
2013/11/16 职场文书
机电职业生涯规划书范文
2014/03/08 职场文书
3分钟英语演讲稿
2014/04/29 职场文书
个人课题方案
2014/05/08 职场文书
Nginx location 和 proxy_pass路径配置问题小结
2021/09/04 Servers
redis数据结构之压缩列表
2022/03/21 Redis
《堡垒之夜》联动《刺客信条》 4月7日正式上线
2022/04/06 其他游戏