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
How to import js configuration file on Vue server
Table of contents background accomplish Supplemen...
A brief analysis of the basic concepts of HTML web pages
What is a web page? The page displayed after the ...
Some front-end basics (html, css) encountered in practice
1. The div css mouse hand shape is cursor:pointer;...
Springboot+VUE to realize login and registration
This article example shares the specific code of ...
ftp remotely connect to Linux via SSH
First install ssh in Linux, taking centos as an e...
Detailed explanation of Docker Volume permission management
Volume data volume is an important concept of Doc...
A commonplace technique for implementing triangles using CSS (multiple methods)
In some interview experiences, you can often see ...
Vue implements three-level navigation display and hiding
This article example shares the specific code of ...
Detailed explanation of outfile, dumpfile, load_file functions in MySQL injection
In the later stage of exploiting SQL injection vu...
The process of deploying and running countly-server in docker in win10
I have just come into contact with and become fam...
innerHTML Application
Blank's blog: http://www.planabc.net/ The use...
Summary of 6 Linux log viewing methods
As a backend programmer, you deal with Linux in m...
Detailed explanation of CentOS configuration of Nginx official Yum source
I have been using the CentOS purchased by Alibaba...
How to implement the paging function of MyBatis interceptor
How to implement the paging function of MyBatis i...
How to make the height of child div fill the remaining space of parent container in CSS
1. Use floating method Effect picture: The code i...