Vue implements Tab tab switching
|
This article example shares the specific code of Vue to implement Tab tab switching for your reference. The specific content is as follows Click on different titles to display the corresponding pictures The code is as follows
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/vue.js" type="text/javascript"></script>
</head>
<style>
*{
margin: 0px;
padding: 0px;
}
#tab{
width:420px;
margin: 20px auto;
position: relative;
}
#tab ul li{
width: 100px;
height: 30px;
border: 1px solid #6699CC;
float: left;
list-style: none;
text-align: center;
line-height: 30px;
}
#tab ul li:first-child{
border-right: none;
/* border-radius: 10px 0px 0px 0px; */
}
#tab ul li:last-child{
border-left: none;
/* border-radius: 0px 10px 0px 0px; */
}
#tab ul .active{
background-color:orange;
color:white;
}
#tab div{
width: 415px;
position: absolute;
top: 32px;
display: none;
}
#tab div img{
width: 350px;
/* border-radius:0px 0px 10px 10px; */
}
#tab div.current{
display: block;
}
</style>
<body>
<div id="tab">
<ul>
<li v-on:mouseover="change(index)" :class="[currentindex==index?'active':'']":key="item.id"v-for="(item,index) in list">{{item.text}}</li>
</ul>
<div :class="[currentindex==index?'current':'']" v-for="(item,index) in list">
<img :key="item.id" v-bind:src="item.imgsrc"/>
</div>
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el:'#tab',
data:{
currentindex:'0', //The index of the current tab list:[{
id:'1',
text:'apple',
imgsrc:'imgs/1.jpg'
},{
id:'2',
text:'orange',
imgsrc:'imgs/2.jpg'
},{
id:'3',
text:'lemon',
imgsrc:'imgs/3.jpg'
}]
},
methods:{
change:function(index){
this.currentindex=index;
}
}
});
</script>
</html>Rendering
The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. You may also be interested in:
|
>>: MySQL Best Practices: Basic Types of Partition Tables
Recommend
How to use VUE and Canvas to implement a Thunder Fighter typing game
Today we are going to implement a Thunder Fighter...
JavaScript Canvas draws dynamic wireframe effect
This article shares the specific code of JavaScri...
Nginx configuration cross-domain request Access-Control-Allow-Origin * detailed explanation
Preface When a 403 cross-origin error occurs No &...
Reflection and Proxy in Front-end JavaScript
Table of contents 1. What is reflection? 2. Refle...
Use pure JS to achieve the secondary menu effect
This article example shares the specific code of ...
Example code of CSS layout at both ends (using parent's negative margin)
Recently, during the development process, I encou...
Detailed explanation of MySQL transaction isolation level and MVCC
Table of contents Transaction Isolation Level Pro...
NestJs uses Mongoose to operate MongoDB
I recently started learning the NestJs framework....
Analysis of the principles and usage of Docker container data volumes
What is a container data volume If the data is in...
HTML table markup tutorial (40): Dark border color attribute of the header BORDERCOLORDARK
In the table header, you can define the dark bord...
Windows CVE-2019-0708 Remote Desktop Code Execution Vulnerability Reproduction Issue
1. Vulnerability Description On May 15, 2019, Mic...
Analysis of the operating principle and implementation process of Docker Hub
Similar to the code hosting service provided by G...
Detailed explanation of the solution to npm ls errors caused by fsevents module under Linux
There is a project developed on Mac, and the pack...
Detailed explanation of how to create MySql scheduled tasks in navicat
Detailed explanation of creating MySql scheduled ...
MySQL subqueries and grouped queries
Table of contents Overview Subqueries Subquery Cl...