vue两个按钮切换_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;

}

实现静态布局

向前切换

单向循环切换

向后切换

{{item.title}}

实现具体功能

/* */

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

}

})

最终效果

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持聚米学院。

vue两个按钮切换_vue实现按钮切换图片相关推荐

python中英文切换_vue根据按钮进行中英文切换
刚学习vue不久,所以对vue了解还不是很深,一直处于边做边查的状态,这几天开发一个双语网站. 内容如下,希望对大家有帮助. 安装 vue-i18n插件npm install vue-i18n 1.首 ...
vue两个卡片并排_Vue组件-卡片层叠拖拽
组件效果 tantan.gif 项目地址 npm安装 npm install vue-tantan-stack --save 如何使用 prev next import stack from '../ ...
vue两个按钮切换_在vue中实现多个按钮样式的点击切换？
1.在vue中实现多个按钮样式的点击切换?有多个按钮,点击其中一个出现下划线,而另一个回到原始状态. 点击其中一个两个同时出现下划线样式: 再次点击两个都还原成最初的样式,即有下划线: 如何实现只有被 ...
swiper左右切换按钮无效_BMD为ATEM切换台发布新的2 M/E和4M/E控制面板
北京 - 2020年7月10日 - Blackmagic Design今天发布两款全新的切换台硬件控制面板ATEM 2 M/E Advanced Panel和ATEM 4 M/E Advanced P ...
dplayer js控制自动全屏_vue-video-player 通过自定义按钮组件实现全屏切换效果【推荐】...
最近公司的产品上线,一些高级功能在基础版本中不对用户开发,通过视频的形式展示. 产品开发用的是 vue, 经同事介绍使用了vue-video-player视频播放插件,通过 demo案例很快实现了视频 ...
aswing学习笔记4-通过调用面板中的按钮实现主界面动态切换皮肤的问题！
通过调用面板中的按钮实现主界面动态切换皮肤的问题! 发表于 : 周三 10月 29, 2008 2:09 pm 由 xueyuan cyz 现在我在做一个动态切换皮肤的的功能,原理是通过点击调用面板 ...
html5 可拖动悬浮按钮,前端vue开发：可移动的悬浮按钮的应用
前端vue开发:可移动的悬浮按钮的应用. class="callback float" @click="onClick" @mousedown="do ...
python作业.创建两个文本框，一个按钮。第 1 个文本框绑定任意键事件，敲击键盘任意可显示字符，在交互窗口中显示该字符；第 2 个文本框绑定＜a＞键事件，敲击键盘 a 字符，在交互窗口中显示 10
""" 创建两个文本框,一个按钮. 第 1 个文本框绑定任意键事件,敲击键盘任意可显示字符,在交互窗口中显示该字符: 第 2 个文本框绑定<a>键事件,敲击键 ...
创建两个文本框，一个按钮。第 1 个文本框绑定任意键事件，敲击键盘任意可显示字符，在交互窗口中显示该字符；
创建两个文本框,一个按钮.第 1 个文本框绑定任意键事件,敲击键盘任意可显示字符,在交互窗口中显示该字符:第 2 个文本框绑定键事件,敲击键盘 a 字符,在交互窗口中显示 10 个'a'字符:按钮绑定 ...

vue两个按钮切换_vue实现按钮切换图片

vue两个按钮切换_vue实现按钮切换图片相关推荐

最新文章

热门文章