• 我相信“交警雨中护送高考生”是真,“交警雨中护送高考生”反被该高考生家长投诉是假。 2019-04-16
  • 14名消防员日巡逻28公里 洗冷水澡 2019-04-10
  • 靶壕有了“蓝军”,百发百中的“神枪手”练起来 2019-04-10
  • 不是秀强大了,别人就会来做朋友,这逻辑不对 2019-04-01
  • 候选企业:中国石油呼和浩特石化公司 2019-03-26
  • 航天员沙漠野外生存训练完美收官!为第一天团打call 2019-03-25
  • 请问,建立市场经济后,原计划经济哪里去?改革后,我们还在实行计划经济,为何没有提及? 2019-03-25
  • 构建年轻干部梯次培养链 2019-03-19
  • 孙实的专栏作者中国国家地理网 2019-03-15
  • 湖南师范大学举行研究阐释党的十九大精神国家社科基金重大专项学术研讨会 2019-03-15
  • [雷人]蠢货!土地处于不同的城市和地段,关联的资源不一样,价值也不一样。不然给咱俩同样面积的土地,咱的在北上广深,你的在边远山区,你干么? 2019-03-08
  • 国际社会持续热议上合青岛峰会:上合组织发展进入新阶段 彰显中国领导力 2019-03-08
  • 珍惜野生动物频现甘孜境内 生态环境质量不断提升 2019-03-06
  • "新经济形势下金融创新的变革与机遇"论坛 2019-03-06
  • 山西11选5走势:用Vue写个开关控制两张图的切换,点击换张图,再次点击就换回去

    0 0 vue.js
    DPJune
    DPJune

    神奇公式秒杀全国11选5 www.2zfa.com 声望值:128 0人

    2018-10-15 15:07:32 提问

    关注 0关注

    收藏 0收藏, 738浏览

    图片描述

    具体的就是点击这个排序,后面的箭头换张向上的图片,再次点击换回来,又变成这个向下的图片,用Vue该怎么写呀?
    补充:具体的道理我都明白,是做个判断,但是具体的代码实现,还是遇到了一些问题,劳烦大佬给实现的代码也写出来吧!拜托了

    请先 登录 后评论

    6个回答

    • 狂奔岻蜗牛162声望 2018-10-15 16:02

      首先,不用换图片,css旋转就好切换class来控制css变换
      请先 登录 后评论
    • freestyle131声望 2018-10-15 16:02

      template标签里写两个<div v-on:click="arrowChange"><img src="up.png" v-show="isup"><img src="down.png" v-show="!isup"></div>,data里定义isup的值为true,methods里添加arrowChange:function(){this.arrowChange=!this.arrowChange},就可以了
      请先 登录 后评论
    • 路漫猿兮54声望 2018-10-15 16:02

      <template> <div> <button @click="showIcon = !showIcon">排序</button> <i :class="`icon ${showIcon ? 'up' : 'down'}`"></i> </div> </template> data () { return { showIcon: false } } 希望帮助到你
      请先 登录 后评论
    • 写bug小能手103声望 2018-10-15 16:02

      <div class="container"> <div class="row"> <div class="col-lg-6 col-lg-offset-3 text-center"> <div id="app"> <button @click="sort">排序</button> <i class="fa el-down-icon" v-show="downIcon"></i> <i class="fa el-up-icon" v-show="!downIcon"></i> </div> </div> </div> </div> <script type="text/javascript"> new Vue({ el: '#app', data: { downIcon: true }, methods: { sort() { //根据你的downIcon判断此时的排序是升序还是降序 //...排序方式 this.downIcon = !this.downIcon } } }) </script> 其实是不建议你这么换图片的,可以用css写个动画让图片旋转180°,还有就是多看看官方的文档,这些都是很基础的一些知识vue官网
      请先 登录 后评论
    • -II、执念213声望 2018-10-15 16:02

      我觉得这种方法更灵活些,楼主觉得呢?这也是很多轮播图常用的逻辑 <template> <div> <img :src="imgSrc" @click="toggleImg"/> </div> </template> <script> export default { data() { return { bgImg: ['../a.jpg', '../b/jpg'], imgIndex: 0 } }, computed: { imgSrc() { //计算图标地址 return bgImg[this.imgIndex] } }, methods: { toggleImg() { this.imgIndex = (this.imgIndex + 1) % (this.bgImg).length } } } </script>
      请先 登录 后评论
    • 风中孤狼128声望 2018-10-15 16:02

      <img src="向上的箭头" v-show="showUpImg" @click="changeImg"> <img src="向下的箭头" v-show="!showUpImg" @click="changeImg"> //设置一个变量标识 data(){ return{ showUpImg:true } } //方法 methods{ changeImg:function(){ this.showUpImg = !this.showUpImg } }
      请先 登录 后评论

    注册新账号

    悬赏追问
    10
    • 10
    • 20
    • 50
    • 100
    • 200
    • 输入数值
    发布追问
  • 我相信“交警雨中护送高考生”是真,“交警雨中护送高考生”反被该高考生家长投诉是假。 2019-04-16
  • 14名消防员日巡逻28公里 洗冷水澡 2019-04-10
  • 靶壕有了“蓝军”,百发百中的“神枪手”练起来 2019-04-10
  • 不是秀强大了,别人就会来做朋友,这逻辑不对 2019-04-01
  • 候选企业:中国石油呼和浩特石化公司 2019-03-26
  • 航天员沙漠野外生存训练完美收官!为第一天团打call 2019-03-25
  • 请问,建立市场经济后,原计划经济哪里去?改革后,我们还在实行计划经济,为何没有提及? 2019-03-25
  • 构建年轻干部梯次培养链 2019-03-19
  • 孙实的专栏作者中国国家地理网 2019-03-15
  • 湖南师范大学举行研究阐释党的十九大精神国家社科基金重大专项学术研讨会 2019-03-15
  • [雷人]蠢货!土地处于不同的城市和地段,关联的资源不一样,价值也不一样。不然给咱俩同样面积的土地,咱的在北上广深,你的在边远山区,你干么? 2019-03-08
  • 国际社会持续热议上合青岛峰会:上合组织发展进入新阶段 彰显中国领导力 2019-03-08
  • 珍惜野生动物频现甘孜境内 生态环境质量不断提升 2019-03-06
  • "新经济形势下金融创新的变革与机遇"论坛 2019-03-06