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 隐藏


  • 相关阅读:
    NeatUpload 同时选择并上传多个文件
    前言
    11:连续出现的字符(1.9)
    06笨小猴(1.9)
    05:最大值和最小值的差(1.9)
    02:输出最高分数的学生姓名(1.9)
    04:谁拿了最多奖学金(1.9)
    03 不高兴的津津(1.9)
    01:查找特定的值(1.9)
    1813(2.1)
  • 原文地址:https://www.cnblogs.com/zwh520/p/9665454.html
Copyright © 2011-2022 走看看