仿大众点评——地区选择（阻止下拉列表框的消失）

如何获取不属于该元素的key值

如图，我们可以通过点击左侧的总地区，显示不同地区的具体街道，具体的实现是通过v-on:click传入的key参数的改变而改变。
当下面的元素取不到上面元素的key值时，可以通过点击事件将key值赋值给data数据的type，从而再获取type相当于获取key值。

<ul>
  <li>
    <a
      v-for="(index, key) in ClassifyArea"
      :key="'all' + key"
      @click="choose(key)"
      >{{ index.AllArea }}</a
    >
  </li>
  <li>
    <a
      v-for="(index, key) in ClassifyArea[type].classifyArea"
      :key="'part' + key"
      >{{ index }}</a
    >
  </li>
</ul>

 methods: {
    choose(key) {
      this.type = key;
    }
  }

data-stopPropagation=“true”

一般的下拉列表框都会出现一种情况：点击之后就消失了。如果想要改变这种情况，可以添加stopPropagation()方法。

$("body").on('click','[data-stopPropagation]',function (e) {
 e.stopPropagation();
});

渲染顺序——优先级

图中“全部地区”显示的字体颜色是橙色，这是通过三元函数:class="key==0?'dropdown-menu-li f63':'dropdown-menu-li'"实现的。如果将.f63的样式写在dropdown-menu-li 上方，在渲染时.f63的样式会被覆盖。因为他们两个都是class属性，所以优先级是一样的。当优先级一样的时候，渲染顺序会从上到下渲染，从而导致css样式的覆盖。

:focus与:active的差别

两个都是伪类。:focus是聚焦，:active是按钮点击的时候。具体解析会在之后的博客中详细介绍，写在可以先看代码中的展示。

页面图

ps：如果想要完整代码，欢迎下载我的github项目：仿大众点评
https://github.com/faimi/Fan_DAZHONGDIANPING.git