Vue 数据双向绑定实现二级下拉悬浮菜单

Vue 的v-bind实现二级下拉悬浮菜单

项目中需要做出类似二级菜单的功能，原本是想偷懒直接用现有的Element UI框架，但是发现虽然格式漂亮但是需要看明白各个代码的意思才能修改成自己想要的极其简单的动态效果，果断放弃。
然后想到Jquery，虽然可以实现，但是转念一想肯定会需要直接对DOM进行操作。去百度了一下，果不其然，代码一大堆。我现在不是在用Vue么，v-bind试一试？说做就做！

1.首先完成鼠标悬浮出现新的div的效果（简单）

直接上代码！
html部分代码如下：

<template>
<div class="person_img" >
    <img id="person_img" :src="img_url"  @mouseover="person_info()" @mouseout="cl_person_info()"/>
 </div>

<div v-show="person_con" class="hidden_div" >
     <div>{
  
  {userid}}</div>
     <div>个人设置</div>
     <div>账户中心</div>
     <div>退出登录</div>
</div>
</template>

//@mouseover、@mouseout和 v-show="person_con" 用来控制悬浮出现和消失的效果

js部分代码如下

<script>
name:'',
    data(){
        return{
            placeholder:'搜索课程',
            token:'',//判断是否登录的参数，在加载