js 事件 导航切换

Question

$("#userTap").on("click","li",function(){
    var tag=$(this).data("tag");
    $(this).addClass("active").siblings().removeClass("active");
    $("#"+tag).show().siblings("div").hide();
});

这段代码用js 咋个写 请指教！！！
加上html代码

 <div id="userTap">
            <!--普通用户-->
            <div v-if="userType=='user'">
                <ul class="user_tap left">
                    <li class="active" data-tag="userInfo">个人资料</li>
                    <li data-tag="userGoods">我的购买</li>
                    <li data-tag="userEdit" class="user_edit_info">修改资料</li>
                    <li data-tag="userChange_psw">修改密码</li>
                    <li @click="loginOut">退出登录</li>
                </ul>

Answer 1

<div id="app">
    <div id="userTap" @click="findtarget">
        <!--普通用户-->
        <div>
            <ul class="user_tap left">
                <li :class="{active:flag=='userInfo'}" data-tag="userInfo">个人资料</li>
                <li :class="{active:flag=='userGoods'}" data-tag="userGoods">我的购买</li>
                <li :class="{active:flag=='userEdit'}" data-tag="userEdit" class="user_edit_info">修改资料</li>
                <li :class="{active:flag=='userChange_psw'}" data-tag="userChange_psw">修改密码</li>
                <li>退出登录</li>
            </ul>
        </div>
    </div>
</div>

var vm = new Vue({
    el: "#app",
    data: {
        flag: ''    
    },
    methods:{
        findtarget(event){
            if(event.target.tagName === 'LI'){
                this.flag = event.target.getAttribute('data-tag');
            }
        }
    }
});

然后你的 $("#"+tag)部分看起来像是二级菜单，然后问题中没提供，一样绑定:class="{hide:flag=='userInfo'}"控制隐藏显示就行了