以下就是小编用Vue写出来的分类选择器
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue分类筛选器</title> <script src="js/vue-2.6.9.min.js"></script> <style type="text/css"> .subjectItem{ margin-right: 20px; cursor: pointer; } .bold{ font-weight: bold; } </style> </head> <body> <div id="app"> <h2>分类选择器</h2> <p> 主题分类: <template v-for="(item,index) in subject"> <span class="subjectItem" @click="subjectClick(item.tag)" :class="{bold:currentTag==item.tag}"> {{item.name}} </span> </template> </p> <p> 主题细节: <template v-for="(item,index) in datail"> <span class="subjectItem" v-show="currentTag==item.tag || currentTag=='all'" :class="{bold:currentName==item.name}" @click="detailClick(item.name)"> {{item.name}} </span> </template> </p> </div> </body> <script type="text/javascript"> var app = new Vue({ el:'#app', data:{ subject:[ { name:'全部', tag:'all' },{ name:'HTML语言', tag:'html' },{ name:'CSS技术', tag:'css' },{ name:'JavaScript', tag:'js' },{ name:'前端框架', tag:'front' },{ name:'后台框架', tag:'back' },{ name:'数据库', tag:'database' } ], datail:[ { name:'HTML', tag:'html' },{ name:'HTML5', tag:'html' },{ name:'CSS', tag:'css' },{ name:'CSS3', tag:'css' },{ name:'js语法基础', tag:'js' },{ name:'DOM文档对象模型', tag:'js' },{ name:'Vue.js', tag:'front' },{ name:'Bootatrap', tag:'front' },{ name:'JSP', tag:'back' },{ name:'PHP', tag:'back' },{ name:'MySQL', tag:'database' },{ name:'mongoDB', tag:'database' } ], currentTag:"all", currentName:"" }, methods:{ /*可以简写成subjectClick()*/ subjectClick:function(tag){ this.currentTag = tag; }, detailClick(name){ this.currentName = name; } } }) </script> </html>完毕，如有疑问请随时联系小编！
