欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue實現(xiàn)手風(fēng)琴效果

 更新時間：2021年11月25日 15:27:13   作者：溫L  
這篇文章主要為大家詳細介紹了vue實現(xiàn)手風(fēng)琴效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了vue實現(xiàn)手風(fēng)琴效果的具體代碼，供大家參考，具體內(nèi)容如下

利用鼠標移入移出事件實現(xiàn)內(nèi)容出現(xiàn)隱藏

用到的知識點：

1.@mouseover 鼠標移入事件

2.@mouseout 鼠標移出事件

3.v-if 條件渲染

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <!-- 簡單樣式設(shè)置 -->
  <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>

結(jié)果：

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論