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
React internationalization react-i18next detailed explanation
Introduction react-i18next is a powerful internat...
How to change MySQL character set utf8 to utf8mb4
For MySQL 5.5, if the character set is not set, t...
Detailed explanation of how to use grep to obtain MySQL error log information
To facilitate the maintenance of MySQL, a script ...
Use of Linux relative and absolute paths
01. Overview Absolute paths and relative paths ar...
The process of using vxe-table to make editable tables in vue
There is a table in the project that needs to be ...
Detailed example of creating and deleting tables in MySQL
The table creation command requires: The name of...
Detailed explanation of Nginx's connection limit configuration for IP addresses in a network segment
The so-called connection limit in Nginx is actual...
Conditional comments to determine the browser (IE series)
<!--[if IE 6]> Only IE6 can recognize <![...
How to implement controllable dotted line with CSS
Preface Using css to generate dotted lines is a p...
How to use .htaccess to prohibit a certain IP from accessing the website
Preface For cost considerations, most webmasters ...
Detailed steps to deploy lnmp under Docker
Table of contents Pull a centos image Generate ng...
Alibaba Cloud OSS access rights configuration (RAM permission control) implementation
Scenario You need to authorize the tester to use ...
HTML+VUE paging to achieve cool IoT large screen function
Effect demo.html <html> <head> <me...
Solution to Vue's inability to watch array changes
Table of contents 1. Vue listener array 2. Situat...
Introduction to new ECMAscript object features
Table of contents 1. Object properties 1.1 Attrib...