• 售前

  • 售后

热门帖子
入门百科

vue实现按钮切换图片

[复制链接]
寻梦敦煌 显示全部楼层 发表于 2021-10-25 19:17:55 |阅读模式 打印 上一主题 下一主题
本文实例为大家分享了vue实现按钮切换图片的具体代码,供大家参考,具体内容如下
Tab选项卡

实现步调

1、实现静态UI结果
用传统的方式实现标签布局和样式
2、基于数据重构UI结果
将静态的布局和样式重构为基于Vue模板语法的情势
处置处罚变乱绑定和js控制逻辑

设置基本样式
  1. {
  2. overflow: hidden;
  3. padding: 0;
  4. margin: 0;
  5. }
  6. .tab ul li {
  7. box-sizing: border-box;
  8. padding: 0;
  9. float: left;
  10. width: 100px;
  11. height: 45px;
  12. line-height: 45px;
  13. list-style: none;
  14. text-align: center;
  15. border-top: 1px solid #ccc;
  16. border-right: 1px solid #ccc;
  17. cursor: pointer;
  18. }
  19. .tab ul li.active {
  20. background-color: orange;
  21. }
  22. .tab ul li:first-child {
  23. border-left: 1px solid blue;
  24. }
  25. .tab div {
  26. width: 500px;
  27. height: 300px;
  28. display: none;
  29. text-align: center;
  30. font-size: 30px;
  31. line-height: 300px;
  32. border: 1px solid blue;
  33. border-top: 0px;
  34. }
  35. .tab div.current {
  36. display: block;
  37. }
复制代码
实现静态布局
  1. <div id="app">
  2. <button v-on:click="handla">向前切换</button>
  3. <button v-on:click="handlc">单向循环切换</button>
  4. <button v-on:click="handle">向后切换</button>
  5. <div class="tab">
  6. <ul>
  7. <li :class="currentIndex==index?'active':''" :key="item.id" v-for="(item,index) in list">{{item.title}}
  8. </li>
  9. </ul>
  10. <div :class="currentIndex==index?'current':''" :key="item.id" v-for="(item,index) in list">
  11. <img :src="item.path">
  12. </div>
  13. </div>
  14. </div>
复制代码
实现具体功能
  1. <script type="text/javascript" src="../js/vue.js"></script>
  2. <script type="text/javascript">
  3. /* */
  4. var vm = new Vue({
  5. el: '#app',
  6. data: {
  7. currentIndex: 0,
  8. list: [{
  9.   id: 1,
  10.   title: 'apple',
  11.   path: 'img/apple.png'
  12. }, {
  13.   id: 2,
  14.   title: 'orange',
  15.   path: 'img/orange.png'
  16. }, {
  17.   id: 3,
  18.   title: 'lemon',
  19.   path: 'img/lemon.png'
  20. }]
  21. },
  22. methods: {
  23. handle: function () {
  24.   if (this.currentIndex < 2) {
  25.   this.currentIndex = this.currentIndex + 1
  26.   }
  27. },
  28. handla: function () {
  29.   if (this.currentIndex > 0) {
  30.   this.currentIndex = this.currentIndex - 1
  31.   }
  32. },
  33. handlc: function () {
  34.   this.currentIndex = this.currentIndex + 1
  35.   if (this.currentIndex > 2) {
  36.   this.currentIndex = 0
  37.   }
  38. },
  39. }
  40. })
  41. </script>
复制代码
终极结果

以上就是本文的全部内容,盼望对大家的学习有所帮助,也盼望大家多多支持草根技术分享。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作