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项目如何引入bootstrap、elementUI、echarts
Nov 26 Vue.js
在vue项目中封装echarts的步骤
Dec 25 Vue.js
Vue过滤器,生命周期函数和vue-resource简单介绍
Jan 12 Vue.js
vue使用vue-quill-editor富文本编辑器且将图片上传到服务器的功能
Jan 13 Vue.js
vue keep-alive的简单总结
Jan 25 Vue.js
如何使用RoughViz可视化Vue.js中的草绘图表
Jan 30 Vue.js
Vue如何实现变量表达式选择器
Feb 18 Vue.js
如何使用vue3打造一个物料库
May 08 Vue.js
Vue Element-ui表单校验规则实现
Jul 09 Vue.js
一定要知道的 25 个 Vue 技巧
Nov 02 Vue.js
Vue的列表之渲染,排序,过滤详解
Feb 24 Vue.js
VUE使用draggable实现组件拖拽
Apr 06 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
简单解决新浪SAE无法上传文件的问题
2015/05/13 PHP
wampserver改变默认网站目录的办法
2015/08/05 PHP
解析PHP的Yii框架中cookie和session功能的相关操作
2016/03/17 PHP
PHP中addslashes与mysql_escape_string的区别分析
2016/04/25 PHP
解决在Laravel 中处理OPTIONS请求的问题
2019/10/11 PHP
我遇到的参数传递中 双引号单引号嵌套问题
2010/02/11 Javascript
js 控制下拉菜单刷新的方法
2013/03/03 Javascript
jQuery内部原理和实现方式浅析
2015/02/03 Javascript
JS鼠标拖拽实例分析
2015/11/23 Javascript
jQuery formValidator表单验证
2016/01/07 Javascript
深入分析node.js的异步API和其局限性
2016/09/05 Javascript
JS实现的简单轮播图运动效果示例
2016/12/22 Javascript
react性能优化达到最大化的方法 immutable.js使用的必要性
2017/03/09 Javascript
微信小程序实战之自定义toast(6)
2017/04/18 Javascript
使用 Node.js 对文本内容分词和关键词抽取
2017/05/27 Javascript
vue.draggable实现表格拖拽排序效果
2018/12/01 Javascript
使用Bootstrap做一个朝代历史表
2019/12/10 Javascript
Node中对非阻塞I/O、事件循环的知识点总结
2020/01/05 Javascript
vue实现五子棋游戏
2020/05/28 Javascript
基于vue实现简易打地鼠游戏
2020/08/21 Javascript
Python使用百度API上传文件到百度网盘代码分享
2014/11/08 Python
Python 3中print函数的使用方法总结
2017/08/08 Python
Python实现DDos攻击实例详解
2019/02/02 Python
Python使用MyQR制作专属动态彩色二维码功能
2019/06/04 Python
获取django框架orm query执行的sql语句实现方法分析
2019/06/20 Python
详解Anaconda 的安装教程
2020/09/23 Python
Python3使用 GitLab API 进行批量合并分支
2020/10/15 Python
使用CSS3美化HTML表单的技巧演示
2016/05/17 HTML / CSS
Adobe Html5 Extension开发初体验图文教程
2017/11/14 HTML / CSS
美国著名的户外用品品牌:L.L.Bean
2018/01/05 全球购物
法人授权委托书格式
2014/04/08 职场文书
入股协议书范本
2014/04/14 职场文书
幼儿园欢迎词范文
2015/01/26 职场文书
交通事故被告答辩状
2015/05/22 职场文书
在Spring-Boot中如何使用@Value注解注入集合类
2021/08/02 Java/Android
golang为什么要统一错误处理
2022/04/03 Golang