Vue implements accordion effect

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:
  • Vue implements the accordion effect of the side menu bar example code
  • Vue.js accordion menu component development example

<<:  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...

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...

Briefly describe the MySQL InnoDB storage engine

Preface: The storage engine is the core of the da...