利用所学的Vue指令实现一个分类筛选器
学完Vue的基础指令以后，我们可以用所学的指令实现一个简易的分类筛选器，接下来让我们看一下，写完以后大概就是这样：
可以看到，成型之后是这个样子，然后我们点击上面的主题分类，下面的主题细节会随着筛选变化：
然后接下来我们开始制作，在这里列举了几个分类：
然后我们可以根据上边的数据在编辑器内写出简单的样式：
主题分类：
{{item.name}}
主题细节：
{{item.name}}
为了更好区分，我们为每个元素设置一个样式，方便更好的辨认：
.subjectItem{
margin-right: 20px;
}
.bold{
font-weight: bold;
}
利用所学的Vue指令为上边的HTML代码赋值并书写样式，接下来就是Vue部分的代码：
我们可以在data数据中心把需要的数据放进去，不要放混，主题分类和主题细节的数据分开，后续需要进行交互，完成以后是这个样子：
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"
}
],
detail:[
{
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:"面向对象的程序设计",
tag:"js"
},
{
name:"Vue.js",
tag:"front"
},
{
name:"Bootstrap",
tag:'front'
},
{
name:"Node.js",
tag:'front'
},
{
name:"Express",
tag:'front'
},
{
name:"PHP",
tag:"back"
},
{
name:"JSP",
tag:'back'
},
{
name:"Java",
tag:"back"
},
{
name:"MySQL",
tag:"database"
},
{
name:"mongDB",
tag:"database"
}
],
currentTag:"all",
currentName:""
}
最后两行代码我们拿来最后判断用~
然后就是我们最后一个步骤，当我们点击的时候让它发生变化，方法层的数据我们写在methods内：
methods:{
subjectClick:function(tag){
this.currentTag=tag;
},
detailClick:function(name){
this.currentName=name;
}
}
这样我们就实现了一个简易的分类筛选器，需要用的时候我们直接更改样式和data里的数据即可~
下面是完整代码（可参考）：
HTML部分：
分类筛选器：
主题分类：
{{item.name}}
主题细节：
{{item.name}}
CSS部分：
.subjectItem{
margin-right: 20px;
}
.bold{
font-weight: bold;
}
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"
}
],
detail:[
{
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:"面向对象的程序设计",
tag:"js"
},
{
name:"Vue.js",
tag:"front"
},
{
name:"Bootstrap",
tag:'front'
},
{
name:"Node.js",
tag:'front'
},
{
name:"Express",
tag:'front'
},
{
name:"PHP",
tag:"back"
},
{
name:"JSP",
tag:'back'
},
{
name:"Java",
tag:"back"
},
{
name:"MySQL",
tag:"database"
},
{
name:"mongDB",
tag:"database"
}
],
currentTag:"all",
currentName:""
},
methods:{
subjectClick:function(tag){
this.currentTag=tag;
},
detailClick:function(name){
this.currentName=name;
}
}
})
希望能帮到你哦~