使用vue框架手动创建导航栏

先上效果图

以下是原先的实现代码和思路：

<li @click="checkTabOpt">
    < a href="#">
        <input id="radio_huiyuanxinxi" type="radio" value="huiyuanxinxi" v-model="titleShow" style="display:none;" >
        <label for="radio_huiyuanxinxi"><span>基础信息</span></label>
    </ a>
</li>

checkTabOpt()方法里做了对于被选中后的样式处理，然后在data中声明titleShow属性，把每个模块对应的代码用一个大div包括住再加<div v-if="titleShow=='huiyuanxinxi'">的vue绑定。这样就基本实现了根据点击的input标签展现不同的div标签。
但是这里有个问题，可以从上图看到，就是在li标签里面设置一个input标签，每一个li中有很大的内边距。注意只点击这些空白的内边距没有绑定到titleShow的值，造成点击空白div不变但是li被选中，只有点击到字上才能实现真正的功能。
然后做了以下代码改动：

<li  @click="checkTabOpt($event,'huiyuanxinxi')"">
    <a href="#">
        <input id="radio_huiyuanxinxi" type="radio"  style="display:none;" >
        <label ><span>基础信息</span></label>
    </a>
</li>

改变点击事件，设置一个参数，传入titleShow的值，在checkTabOpt()方法中使用set绑定值。

this.$set("titleShow",title);

这样只要点击到li标签就能改变titleShow的值，传递值也比起前一种方式更加简洁。
博主功力不深，欢迎大家谈论。