zoukankan      html  css  js  c++  java
  • vue菜单切换

    HTML:

    <div id="box">
        <ul>
            <li v-for= "(item,index) in arry">
                <h3 v-text="item.txt" @click="show(index,xian)"  @mouseover="show(index,xian)" :class="index === flg ? 'red' :''"></h3>
                <ol v-show="index === flg ? xian : false"  >
                    <li v-for="(list,idx) in item.cont" v-text="list" class="name" ></li>
                </ol>
            </li>
        </ul>
    </div>

     JS:

    <script>
    //渲染
    new Vue({
        el: "#box",
        data:{
            flg:-1,
            xian:false,
            isShow:true,
            arry:[
                {"txt":"这是第 1 个div标签","cont":["zhang_1","li_1","wang_1"]},
                {"txt":"这是第 2 个div标签","cont":["zhang_2","li_2","wang_2"]},
                {"txt":"这是第 3 个div标签","cont":["zhang_3","li_3","wang_3"]}
            ]
        },
        //所有的事件方法集合
        methods: {
            show(idx){
                //判断是不是点击的自身,如果不是自身,直接显示子元素。其他隐藏
                if(idx != this.flg){
                    this.flg = idx;
                    this.xian = true;
                }else{
                    //如果是自身,判断它是显示还是隐藏,显示就隐藏,隐藏就显示
                    if(this.xian == false){
                        this.xian = true;
                        this.flg = idx;
    
                    }else{
                        this.xian = false;
                    }   
                }
            }
        }
    })
    </script>

    效果:

    总结:

      一般用于pc端的菜单栏。

    思路:

      1. 先判断它点击是否是自己

      2. 在判断它的子元素 显示 or 隐藏


  • 相关阅读:
    JVM运行参数
    JVM学习
    自己瞎写的小项目随笔
    git入门
    @ResponseBody 注释
    jquery 正则表达式 验证邮箱 手机号 座机号 身份证
    ORACLE计算一年的12个月份
    css 图片 文字居中
    Jquery 取值相关
    标题栏下拉菜单
  • 原文地址:https://www.cnblogs.com/zwh520/p/9665454.html
Copyright © 2011-2022 走看看