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
MySQL chooses the right storage engine
When it comes to databases, one of the most frequ...
MySQL data compression performance comparison details
Table of contents 1. Test environment 1.1 Hardwar...
How to implement the paging function of MyBatis interceptor
How to implement the paging function of MyBatis i...
js code that associates the button with the enter key
Copy code The code is as follows: <html> &l...
WeChat applet tab left and right sliding switch function implementation code
Effect picture: 1. Introduction Your own applet n...
SQL implementation of LeetCode (196. Delete duplicate mailboxes)
[LeetCode] 196.Delete Duplicate Emails Write a SQ...
The difference and advantages and disadvantages of Mysql primary key UUID and auto-increment primary key
introduction I used postgresql database for some ...
In the interview, I was asked whether select...for update would lock the table or the row.
Table of contents verify: Combined with the examp...
Detailed explanation of Javascript Echarts air quality map effect
We need to first combine the air quality data wit...
How to deploy stand-alone Pulsar and clustered Redis using Docker (development artifact)
Table of contents 1. Introduction: 2. Docker: 1 C...
How to implement image mapping with CSS
1. Introduction Image maps allow you to designate...
Briefly understand the MYSQL database optimization stage
introduction Have you ever encountered a situatio...
Detailed explanation of webpack-dev-server core concepts and cases
webpack-dev-server core concepts Webpack's Co...
Implementation steps of Mysql merge results and horizontal splicing fields
Preface Recently, I was working on a report funct...
MySql forgotten password modification method is suitable for versions 5.7 and above
1. Stop the mysqld.exe process first 2. Open cmd ...