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 相关文章推荐
学习jquery必备 api中英文对照的chm手册 下载
May 03 Javascript
JavaScript打字小游戏代码
Dec 26 Javascript
10款非常有用的 Ajax 插件分享
Mar 14 Javascript
javascript跨浏览器的属性判断方法
Mar 16 Javascript
js时钟翻牌效果实现代码分享
Jul 31 Javascript
jQuery实现仿微软首页感应鼠标变化滑动窗口效果
Oct 08 Javascript
jQuery实现智能判断固定导航条或侧边栏的方法
Sep 04 Javascript
详解Angular的内置过滤器和自定义过滤器【推荐】
Dec 26 Javascript
webpack学习教程之publicPath路径问题详解
Jun 17 Javascript
详解使用React全家桶搭建一个后台管理系统
Nov 04 Javascript
vue-router路由与页面间导航实例解析
Nov 07 Javascript
Antd表格滚动 宽度自适应 不换行的实例
Oct 27 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 操作符与控制结构
2012/03/07 PHP
php连接Access数据库错误及解决方法
2013/06/20 PHP
PHP中Restful api 错误提示返回值实现思路
2016/04/12 PHP
PHP使用GD库制作验证码的方法(点击验证码或看不清会刷新验证码)
2017/08/15 PHP
PHP实现递归的三种方法
2020/07/04 PHP
JavaScript 学习笔记二 字符串拼接
2010/03/28 Javascript
JavaScript语言核心数据类型和变量使用介绍
2013/08/23 Javascript
jquery实现鼠标拖动图片效果示例代码
2014/01/09 Javascript
JavaScript Serializer序列化时间处理示例
2014/07/31 Javascript
JS组件Bootstrap实现弹出框和提示框效果代码
2015/12/08 Javascript
深入理解angularjs过滤器
2016/05/25 Javascript
jQuery组件easyui基本布局实现代码
2016/08/25 Javascript
nodeJs内存泄漏问题详解
2016/09/05 NodeJs
JS IOS/iPhone的Safari浏览器不兼容Javascript中的Date()问题如何解决
2016/11/11 Javascript
详解Vue-基本标签和自定义控件
2017/03/24 Javascript
angularjs封装$http为factory的方法
2017/05/18 Javascript
vue2.0 computed 计算list循环后累加值的实例
2018/03/07 Javascript
微信小程序实现分享到朋友圈功能
2018/07/19 Javascript
在react中使用vuex的示例代码
2018/07/30 Javascript
JsonProperty 的使用方法详解
2019/10/11 Javascript
python字符串连接方式汇总
2014/08/21 Python
Python中的fileinput模块的简单实用示例
2015/07/09 Python
python itchat实现微信自动回复的示例代码
2017/08/14 Python
Python数据结构与算法之图的基本实现及迭代器实例详解
2017/12/12 Python
对Python3+gdal 读取tiff格式数据的实例讲解
2018/12/04 Python
Pandas聚合运算和分组运算的实现示例
2019/10/17 Python
Django异步任务线程池实现原理
2019/12/17 Python
python对指定字符串逆序的6种方法(小结)
2020/04/02 Python
keras自定义损失函数并且模型加载的写法介绍
2020/06/15 Python
PyCharm2020最新激活码+激活码补丁(亲测最新版PyCharm2020.2激活成功)
2020/11/25 Python
Python爬虫新手入门之初学lxml库
2020/12/20 Python
利用HTML5实现使用按钮控制背景音乐开关
2015/09/21 HTML / CSS
西雅图的买手店:Totokaelo
2019/10/19 全球购物
意大利文具和办公产品在线商店:Y-Office
2020/02/27 全球购物
Java里面有没有全局变量?为什么?
2015/02/06 面试题
财务管理专业推荐信
2013/11/19 职场文书