我们在新建网站的时候，总是要做导航列表，这在传统的WEB开发中已经是很成熟的技术了，学习了自己学习VUE，看了官方文档，自己学习了很多。现在我将分享它。第一个在我的VUE入门学习笔记中也有提到：在JQUERY中，我们通常使用：$("li[class='active']").removeClass("active");//移除当前选中项选中的样式；$(selector).addClass('active');//为选中项添加选中样式；很简单，你需要npminstalljquery，然后在baseConfig中进行配置。但是学习VUE，最好是使用它自带的Class和Style绑定。第二种：VUE中没有选择器，但支持CSS属性的状态关联操作（Class和Style绑定）：eg：v-bind:class="{active:isActive}"解释：当isActive的值为true，active样式有效，Dom渲染结果为：class="active"为false时，active样式无效，Dom渲染结果为：class=""所以我们可以利用这个属性来使一个文章标签HTML:这个语句生成一个列表并绑定一个选定的事件。判断事件动态绑定到类上。我们还选择了这个事件：functionselected(seclctedName){this.activeName=seclctedName;}Dataattribute:data(){return{tagNames:[{name:'hello',tabLink:'/Hello'},{name:'Login',tabLink:'/Login'},{name:'MyBlog',tabLink:'/MyBlog'}],activeName:'hello'//当activeName的初始值为空时，没有浏览器加载时默认选择列表项。是hello的时候，默认选中hello列表}}，乍一看没问题，切换正常，但是当我们停留在非HELLO页面，刷新页面，hello被选中，选中的取消刷新前的样式，这是因为我们给activeName赋了一个初始值：'hello'。所以有错误。第三种方式：思路和第二种一样，但是activeName，我在新建一个导航样式列表组件的时候，为它定义了一个TITLE属性props：{title:{type:String,default:'any'}}并在列表中使用：class="{active:title==tabbarName.name}绑定activeCSS，当其他页面调用该组件时，指定TITLE，如：、这个切换到MyBlog的时候会被选中，随便刷新一下，不会有方法二，方法四：也是最官方的，也是最简单的，我在看当时的VUEROUTER，因为看着眼熟，速度更快，所以漏掉了这个知识点，开始页最下面有这么一句话：当对应的路由匹配成功后，class属性值.router-link-active会自动设置，所以你只需要设置在你的STYLE文件中，写上.router-link-active的样式即可。选择列表后，系统会自动绑定该样式。应该有很多锤头遮脸的表情包*。然后
