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

 

---