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
Detailed tutorial on installing VirtualBox and Ubuntu 16.04 under Windows system
1. Software Introduction VirtualBox VirtualBox is...
Understanding what Node.js is is so easy
Table of contents Official introduction to Node.j...
Implementation of restoring data by directly copying files in the data directory in mysql
mysql copies the files in the data directory to r...
Reasons and solutions for MySQL failing to create foreign keys
When associating two tables, a foreign key could ...
How to prevent Vue from flashing in small projects
Summary HTML: element plus v-cloak CSS: [v-cloak]...
Detailed usage of docker-maven-plugin
Table of contents Docker-Maven-Plugin Maven plugi...
Analysis of the cause of docker error Exited (1) 4 minutes ago
Docker error 1. Check the cause docker logs nexus...
Solution to the problem of insufficient storage resource pool of Docker server
Table of contents 1. Problem Description 2. Probl...
Implementing carousel effects with JavaScript
This article shares the specific code for JavaScr...
The complete usage of setup, ref, and reactive in Vue3 combination API
1. Getting started with setUp Briefly introduce t...
Mysql accidental deletion of data solution and kill statement principle
mysql accidentally deleted data Using the delete ...
Detailed explanation of CSS child element fixed positioning solution relative to parent element
Basic Concepts Absolute positioning: An element b...
Which scenarios in JavaScript cannot use arrow functions
Table of contents 1. Define object methods 2. Def...
How to use stored procedures in MySQL to quickly generate 1 million records
Preface When testing, in order to test the projec...
A brief discussion on the types of node.js middleware
Table of contents Overview 1. Application-level m...