点击一级收起隐藏

最新推荐文章于 2022-06-30 14:59:26 发布

故事只若初见

最新推荐文章于 2022-06-30 14:59:26 发布

阅读量69

点赞数

本文链接：https://blog.csdn.net/qq_45424679/article/details/114273881

版权

<!DOCTYPE html> 
<html> 
<head> 
  <meta charset="utf-8"> 
  <title>vue点击切换显示隐藏</title> 
  <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> 
  <style type="text/css"> 
  *{ 
    padding: 0; 
    margin: 0; 
    font-size: 14px; 
    list-style:none
  } 
  ul{ 
    width: 200px; 
    height: auto; 
  
  } 
  h2{ 
    background: green; 
    border: 1px solid #fff; 
    color: #fff;
    width:200px; 
    height: 30px; 
    line-height: 30px; 
    text-indent: 24px; 
  } 
  h3{ 
    background: #999; 
    height: 24px; 
    line-height: 24px; 
    border: 1px solid #fff; 
    text-indent: 50px; 
  } 
  </style> 
</head> 
<body> 
  <div id="example"> 
    <ul style ="  display: flex;"> 
      <li v-for="item in items"> 
        <h2 @click="showToggle(item)">{{item.name}}</h2> 
        <ul v-show="item.isSubShow"> 
          <li v-for="subItem in item.subItems"> 
            <h3>{{subItem.name}}</h3> 
          </li> 
        </ul> 
      </li> 
    </ul> 
  </div> 
  <script type="text/javascript"> 
  new Vue({ 
    el:"#example", 
    data:{ 
      items:[ 
        { 
          name:'家用电器', 
          isSubShow:false, 
          subItems:[ 
            { 
              name:'笔记本电脑'
            }, 
            { 
              name:'台式电脑'
            }, 
            { 
              name:'电视机'
            } 
          ] 
        }, 
        { 
          name:'服装', 
          isSubShow:false, 
          subItems:[ 
            { 
              name:'男士服装'
            }, 
            { 
              name:'女士服装'
            }, 
            { 
              name:'青年服装'
            } 
          ] 
        } 
      ] 
    }, 
    methods:{ 
      showToggle:function(item){ 
        item.isSubShow = !item.isSubShow 
      } 
    } 
  }) 
  </script> 
</body> 
</html>