利用vue怎么实现一个按钮切换图片功能_程序开发

利用vue怎么实现一个按钮切换图片功能

创始人

2024-12-29 01:03:51

0次

实现步骤

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;
}

实现静态布局


 向前切换
 单向循环切换
 向后切换

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

 },

 }
 })

上一篇：怎么在node中利用短信api实现一个验证码登录功能

下一篇：怎么在PostgreSQL中利用递归优化求稀疏列唯一值

利用vue怎么实现一个按钮切换图片功能

设置基本样式

实现静态布局

实现具体功能

相关内容

热门资讯