vue实现手风琴效果

Nice JavaScript

2022-04-15 0 701

本文实例为大家分享了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>

结果：

vue实现手风琴效果

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持NICE源码。

收藏 (0) 点赞 (0)

免责声明：
1、本网站所有发布的源码、软件和资料均为收集各大资源网站整理而来;仅限用于学习和研究目的,您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容。不得使用于非法商业用途，不得违反国家法律。否则后果自负！

2、本站信息来自网络，版权争议与本站无关。一切关于该资源商业行为与www.niceym.com无关。
如果您喜欢该程序，请支持正版源码、软件，购买注册，得到更好的正版服务。
如有侵犯你版权的，请邮件与我们联系处理（邮箱:skknet@qq.com），本站将立即改正。

NICE源码网 JavaScript vue实现手风琴效果 https://www.niceym.com/20498.html

Nice

上一篇：使用js实现动态背景

下一篇： vue实现简易的计算器功能

微信