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

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

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