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
js learning notes: class, super and extends keywords
Table of contents Preface 1. Create objects befor...
Install Kafka in Linux
Table of contents 1.1 Java environment as a prere...
MySQL select, insert, update batch operation statement code examples
In projects, batch operation statements are often...
The process of deploying a project to another host using Jenkins
environment Hostname ip address Serve Jenkins 192...
MySQL database operations (create, select, delete)
MySQL Create Database After logging into the MySQ...
Summary of frequently used commands for Linux file operations
0. New operation: mkdir abc #Create a new folder ...
Vue implements simple production of counter
This article example shares the simple implementa...
Detailed explanation of common usage of MySQL query conditions
This article uses examples to illustrate the comm...
Analysis of permissions required to run docker
Running Docker requires root privileges. To solve...
Detailed explanation of template tag usage (including summary of usage in Vue)
Table of contents 1. Template tag in HTML5 2. Pro...
Use of MySQL query rewrite plugin
Query Rewrite Plugin As of MySQL 5.7.6, MySQL Ser...
A brief discussion on the pitfalls of react useEffect closure
Problem code Look at a closure problem code cause...
A brief introduction to Linux environment variable files
In the Linux system, environment variables can be...
Mysql5.7.14 Linux version password forgotten perfect solution
In the /etc/my.conf file, add the following line ...
JavaScript Canvas implements Tic-Tac-Toe game
This article shares the specific code of JavaScri...