vue菜单切换

Posted 2021-01-06 zwh520

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

 

---