vue实现按钮切换图片

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

Tab选项卡

实现步骤

1、实现静态UI效果

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

2、基于数据重构UI效果

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

设置基本样式

{
 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>

最终效果

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

(0)

相关推荐

  • vue自定义js图片碎片轮播图切换效果的实现代码

    定义一个banner.js文件,代码如下 ;window.requestAnimationFrame = window.requestAnimationFrame||function(a){return setTimeout(a,1000/60)}; window.cancelAnimationFrame = window.cancelAnimationFrame||clearTimeout; var FragmentBanner = function(option) { //实例化时,可传的参

  • Vue实现base64编码图片间的切换功能

    前言 昨天在项目开发中遇到了一个需要展示多张图片到一个容器中的需求,每张图片在鼠标移入时都要更换图片路径,展示一个新的图片,由于每张图片大小都在2~6kb之间,webpack中配置了图片在10kb以内自动转换base64,所有就有了本篇文章的分享.先给大家展示下最后要实现的效果 实现思路 给每个元素添加@mouserover事件和@mouseleave事件 绑定函数,传用于识别当前参数的标识 根据所传参数判断当前状态下应该显示什么图片 解析渲染 实现过程 从json文件中读取图片信息集合,循环渲

  • vue使用swiper实现左右滑动切换图片

    本文实例为大家分享了vue使用swiper实现左右滑动切换图片的具体代码,供大家参考,具体内容如下 使用npm 安装vue-awesome-swiper npm install vue-awesome-swiper --save 在main.js中引用 import VueAwesomeSwiper from 'vue-awesome-swiper' Vue.user(VueAwesomeSwiper) import 'swiper/dist/css/swiper.css' 在组件中使用 <te

  • vue实现按钮切换图片

    本文实例为大家分享了vue实现按钮切换图片的具体代码,供大家参考,具体内容如下 Tab选项卡 实现步骤 1.实现静态UI效果 用传统的方式实现标签结构和样式 2.基于数据重构UI效果 将静态的结构和样式重构为基于Vue模板语法的形式 处理事件绑定和js控制逻辑 设置基本样式 { overflow: hidden; padding: 0; margin: 0; } .tab ul li { box-sizing: border-box; padding: 0; float: left; width

  • jquery实现点击左右按钮切换图片

    本文实例为大家分享了jquery点击左右按钮切换图片的具体代码,供大家参考,具体内容如下 当点击了右边的按钮后,图片向左移动,同理左边按钮. css样式此处省略......直接进入到js代码中 <div class="down-down-div"> <div class="pics-frame"> <div class="frame-first"> <!--第一个div --> <div id

  • javascript实现点击按钮切换图片

    本文实例为大家分享了javascript实现点击按钮切换图片的具体代码,供大家参考,具体内容如下 效果图: 首先搭建基本的结构 <div id="div"> <p id="desc"></p> <!--默认显示第一张图片--> <img src="img/1.jpg" alt="加载失败" style="width: 800px;height: 400px;&qu

  • JS实现点击button按钮切换图片

    JS实现点击button按钮切换图片的具体代码,供大家参考,具体内容如下 放暑假在家打算学习html/css/js制作网页,只有html/css的一些基础.实现效果如图: 这个网页很简单,是用Dreamweaver写的,但是是通过自己做的,算是对JS的一个入门案列. 最初的想法是是做一轮播效果,但是刚开始学JS发现有很多问题,所以就做了一个简单的图片切换. body部分: <body> <h1>JS实现图片的切换</h1> <div class="con

  • js鼠标点击按钮切换图片-图片自动切换-点击左右按钮切换特效代码

    今天来分享一下鼠标点击按钮,图片进行切换+图片自动切换+点击左右按钮图片进行切换的三种效果的组合代码. 最后的效果如下: Html代码部分: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <met

  • Vue实现鼠标悬浮切换图片src

    本文实例为大家分享了Vue实现鼠标悬浮切换图片src的具体代码,供大家参考,具体内容如下 需求: 1. 鼠标悬浮到图示按钮上面,图片切换成灰色按钮2. 鼠标离开图示按钮,图片切换成回白色按钮 Html部分: <!-- 如果此处的两个鼠标事件不生效,可以在mouseenter后面添加.native后缀 --> <div class="left-btn"      @click="saveTemplate()"      @mouseenter=&qu

  • 利用JS实现点击按钮后图片自动切换的简单方法

    我么常常看到一个网站的主界面的图片可以切换自如,那么又是如何实现的呢? 1.HTML页面布局如图所示: Main(div) top(div)(显示需要显示的图片) bottom UL (li)<选择>left center right 2.实现上述布局 swap.html <!DOCTYPE html PUBLIC '-//W3C//DTD HTML 4.01 Strict//EN' 'http://www.w3.org/TR/html4/strict.dtd'> <html

  • 原生javascript实现图片按钮切换

    先给大家看下效果展示图 以下为详细代码: 复制代码 代码如下: function LGY_picSwitch(option){     this.oWrap = this.getId(option.wrapID); //最外层元素     this.olistWrap = this.getNodeByClassname(this.oWrap,'gy_picSwitch_listWrap')[0];     this.oUl = this.olistWrap.getElementsByTagNam

  • vue实现点击按钮切换背景颜色的示例代码

    用vue简单的实现点击按钮切换背景颜色,具体代码如下所示: <div class="btnTitle"> <div class="btn-bg" :class="{bg:time == 3}" @click="changeBg(3)">15天</div> <div class="btn-bg" :class="{bg:time == 4}" @c

随机推荐