vue实现按钮切换图片


Posted in Vue.js onJanuary 20, 2021

本文实例为大家分享了vue实现按钮切换图片的具体代码,供大家参考,具体内容如下

Tab选项卡

vue实现按钮切换图片

实现步骤

1、实现静态UI效果

用传统的方式实现标签结构和样式

2、基于数据重构UI效果

将静态的结构和样式重构为基于Vue模板语法的形式
处理事件绑定和js控制逻辑

vue实现按钮切换图片

设置基本样式

{
 overflow: hidden;
 padding: 0;
 margin: 0;
 }

 .tab ul li {
 box-sizing: border-box;
 padding: 0;
 float: left;
 width: 100px;
 height: 45px;
 line-height: 45px;
 list-style: none;
 text-align: center;
 border-top: 1px solid #ccc;
 border-right: 1px solid #ccc;
 cursor: pointer;
 }

 .tab ul li.active {
 background-color: orange;
 }

 .tab ul li:first-child {
 border-left: 1px solid blue;
 }

 .tab div {
 width: 500px;
 height: 300px;
 display: none;
 text-align: center;
 font-size: 30px;
 line-height: 300px;
 border: 1px solid blue;
 border-top: 0px;
 }

 .tab div.current {
 display: block;
}

实现静态布局

<div id="app">
 <button v-on:click="handla">向前切换</button>
 <button v-on:click="handlc">单向循环切换</button>
 <button v-on:click="handle">向后切换</button>

 <div class="tab">
 <ul>
 <li :class="currentIndex==index?'active':''" :key="item.id" v-for="(item,index) in list">{{item.title}}
 </li>
 </ul>
 <div :class="currentIndex==index?'current':''" :key="item.id" v-for="(item,index) in list">
 <img :src="item.path">
 </div>
 </div>

</div>

实现具体功能

<script type="text/javascript" src="../js/vue.js"></script>
 <script type="text/javascript">
 /* */
 var vm = new Vue({
 el: '#app',
 data: {
 currentIndex: 0,
 list: [{
  id: 1,
  title: 'apple',
  path: 'img/apple.png'
 }, {
  id: 2,
  title: 'orange',
  path: 'img/orange.png'
 }, {
  id: 3,
  title: 'lemon',
  path: 'img/lemon.png'
 }]
 },
 methods: {
 handle: function () {
  if (this.currentIndex < 2) {
  this.currentIndex = this.currentIndex + 1
  }
 },

 handla: function () {
  if (this.currentIndex > 0) {
  this.currentIndex = this.currentIndex - 1
  }

 },
 handlc: function () {
  this.currentIndex = this.currentIndex + 1
  if (this.currentIndex > 2) {
  this.currentIndex = 0
  }

 },

 }
 })
</script>

最终效果

vue实现按钮切换图片

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Vue.js 相关文章推荐
Vue router传递参数并解决刷新页面参数丢失问题
Dec 02 Vue.js
Vue——解决报错 Computed property &quot;****&quot; was assigned to but it has no setter.
Dec 19 Vue.js
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
Jan 08 Vue.js
Vue实现一种简单的无限循环滚动动画的示例
Jan 10 Vue.js
详解template标签用法(含vue中的用法总结)
Jan 12 Vue.js
如何在vue 中使用柱状图 并自修改配置
Jan 21 Vue.js
用vite搭建vue3应用的实现方法
Feb 22 Vue.js
开发一个封装iframe的vue组件
Mar 29 Vue.js
Vue + iView实现Excel上传功能的完整代码
Jun 22 Vue.js
详细聊聊vue中组件的props属性
Nov 02 Vue.js
Vue的生命周期一起来看看
Feb 24 Vue.js
浅谈Vue的computed计算属性
Mar 21 Vue.js
Vue实现图书管理案例
Jan 20 #Vue.js
详解vue之自行实现派发与广播(dispatch与broadcast)
Jan 19 #Vue.js
vue二选一tab栏切换新做法实现
Jan 19 #Vue.js
vue-resource 拦截器interceptors使用详解
Jan 18 #Vue.js
vue element el-transfer增加拖拽功能
Jan 15 #Vue.js
Vue实现多页签组件
Jan 14 #Vue.js
如何在vue中使用HTML 5 拖放API
Jan 14 #Vue.js
You might like
一个PHP的QRcode类与大家分享
2011/11/13 PHP
微信第三方登录(原生)demo【必看篇】
2017/05/26 PHP
在php的yii2框架中整合hbase库的方法
2018/09/20 PHP
PHP中非常有用却鲜有人知的函数集锦
2019/08/17 PHP
JS BASE64编码 window.atob(), window.btoa()
2021/03/09 Javascript
dtree 网页树状菜单及传递对象集合到js内,动态生成节点
2012/04/14 Javascript
Jquery 的outerHeight方法使用介绍
2013/09/11 Javascript
js同比例缩放图片的小例子
2013/10/30 Javascript
js图片延迟技术一般的思路与示例
2014/03/20 Javascript
jQuery实现数字加减效果汇总
2014/12/16 Javascript
jQuery使用before()和after()在元素前后添加内容的方法
2015/03/26 Javascript
javascript每日必学之条件分支
2016/02/17 Javascript
vue富文本编辑器组件vue-quill-edit使用教程
2018/09/21 Javascript
nodejs aes 加解密实例
2018/10/10 NodeJs
解决axios post 后端无法接收数据的问题
2019/10/29 Javascript
JavaScript实现省份城市的三级联动
2020/02/11 Javascript
在实例中重学JavaScript事件循环
2020/12/03 Javascript
[09:13]DOTA2-DPC中国联赛 正赛 Ehome vs Magma 选手采访 1月19日
2021/03/11 DOTA
Python脚本实现Web漏洞扫描工具
2016/10/25 Python
python 获取网页编码方式实现代码
2017/03/11 Python
基于python 爬虫爬到含空格的url的处理方法
2018/05/11 Python
Python基于Logistic回归建模计算某银行在降低贷款拖欠率的数据示例
2019/01/23 Python
使用Python爬取Json数据的示例代码
2020/12/07 Python
python 对象真假值的实例(哪些视为False)
2020/12/11 Python
美国女士时尚珠宝及配饰购物网站:Icing
2018/07/02 全球购物
Haggar官网:美国男装品牌
2020/02/16 全球购物
社区党员先进事迹
2014/01/22 职场文书
中秋寄语大全
2014/04/11 职场文书
学校花圃的标语
2014/06/18 职场文书
乡镇三严三实学习心得体会
2014/10/13 职场文书
预备党员群众路线教育实践活动思想汇报2014
2014/10/25 职场文书
幼儿园小班个人总结
2015/02/12 职场文书
集结号观后感
2015/06/08 职场文书
2016年五一国际劳动节活动总结
2016/04/06 职场文书
浅谈resultMap的用法及关联结果集映射
2021/06/30 Java/Android
vue项目如何打包之项目打包优化(让打包的js文件变小)
2022/04/30 Vue.js