Vue implements accordion effect
|
This article example shares the specific code of Vue to achieve the accordion effect for your reference. The specific content is as follows Use mouse in and out events to hide content Knowledge points used: 1.@mouseover mouse move event 2.@mouseout Mouse out event 3. v-if conditional rendering
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- Simple style settings-->
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.title{
width: 90px;
height: 40px;
line-height: 40px;
text-align: center;
background-color: #AFAFAF;
}
.active{
background-color: #000000;
color: white;
}
</style>
</head>
<body>
<div id="box">
<ul class="ul">
<!-- Mouse in and out events-->
<li @mouseover="num=1" @mouseout="num=0" class="title">Title 1</li>
<!-- Conditional rendering -->
<li v-if="num==1">h1h1h1h1</li>
<li v-if="num==1">h1h1h1h1</li>
<li v-if="num==1">h1h1h1h1</li>
<li v-if="num==1">h1h1h1h1</li>
</ul>
<ul class="ul">
<li @mouseover="num=2" @mouseout="num=0" class="title">Title 2</li>
<li v-if="num==2">h2h2h2h2</li>
<li v-if="num==2">h2h2h2h2</li>
<li v-if="num==2">h2h2h2h2</li>
<li v-if="num==2">h2h2h2h2</li>
</ul>
<ul>
<li @mouseover="num=3" @mouseout="num=0" class="title">Title 3</li>
<li v-if="num==3">h3h3h3hh3</li>
<li v-if="num==3">h3h3h3hh3</li>
<li v-if="num==3">h3h3h3hh3</li>
<li v-if="num==3">h3h3h3hh3</li>
</ul>
</div>
</body>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var vm = new Vue({
el: "#box",
data() {
return {
num: 0
}
}
})
</script>
</html>result:
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:
|
<<: How to use positioning to center elements (web page layout tips)
>>: Sample code for testing technology application based on Docker+Selenium Grid
Recommend
Implementation of vue+drf+third-party sliding verification code access
Table of contents 1. Background 2. Verification p...
Solve the problem of specifying udp port number in docker
When Docker starts a container, it specifies the ...
How to implement the jQuery carousel function
This article shares the implementation code of jQ...
Detailed explanation of MySQL combined query
Using UNION Most SQL queries consist of a single ...
JavaScript css3 to implement simple video barrage function
This article attempts to write a demo to simulate...
Vue component organization structure and component registration details
Table of contents 1. Component Organization 2. Co...
Specific steps to use vant framework in WeChat applet
Table of contents 1. Open the project directory o...
Setting the width of table cell td is invalid and the internal content always stretches it
When making a table page, sometimes the width set ...
Detailed explanation of mysql download and installation process
1: Download MySql Official website download addre...
jQuery implements Table paging effect
This article shares the specific code of jQuery t...
Detailed explanation of linux nslookup command usage
[Who is nslookup?] 】 The nslookup command is a ve...
Solve the problem that IN subquery in MySQL will cause the index to be unusable
Today I saw a case study on MySQL IN subquery opt...
A brief discussion on whether CSS will block page rendering
Maybe everyone knows that js execution will block...
CSS to achieve pop-up window up and down center left and right and transparent background lock window effect
There is a simple CSS method to realize the pop-u...
Briefly describe the MySQL InnoDB storage engine
Preface: The storage engine is the core of the da...