vue實現手風琴效果

Posted on by

本文實例為大傢分享瞭vue實現手風琴效果的具體代碼，供大傢參考，具體內容如下

利用鼠標移入移出事件實現內容出現隱藏

用到的知識點：

1.@mouseover 鼠標移入事件

2.@mouseout 鼠標移出事件

3.v-if 條件渲染

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <!-- 簡單樣式設置 -->
  <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">
      <!-- 鼠標移入移出事件 -->
      <li @mouseover="num=1" @mouseout="num=0" class="title">標題1</li>
      <!-- 條件渲染 -->
      <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">標題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">標題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>

結果：

以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。

推薦閱讀：