介绍 & lt; !DOCTYPE html>
& lt; html lang=癳n"祝辞
& lt; head>
& lt;元charset=癠TF-8"祝辞
& lt; title> Document
& lt;脚本src=皏ue.v2.6.10.js"祝辞& lt;/script>
& lt;风格类型=拔谋?css"比;
* {
保证金:0;
填充:0;
}
李{
list-style:没有;
}
一个{
颜色:# 333;
文字修饰:没有;
}
答:{徘徊
颜色:红色
}
#产品{
宽度:700 px;
保证金:20 px汽车;
背景:# f2f2f2;
边界:1 px固体# ddd;
}
ul {
填充:10 px;
}
{#过滤器
填充:0 10 px;
高度:40像素;
行高:40像素;
background - color: # ddd
}
#品牌跨越{
显示:inline-block;
margin-right: 30 px;
}
#品牌{
保证金:0 5 px;
}
李#品牌{
margin-bottom: 10 px;
}
马克{
边界:1 px固体红;
padding-left: 5 px;
margin-right: 15 px;
}
马克em {
border-left: 1 px固体红;
填充:0 5 px;
margin-left: 5 px;
字体样式:正常;
}
& lt;/style>
& lt;/head>
& lt; body>
& lt; div id=皃roduct"祝辞
& lt; div id=癴ilter"祝辞
& lt; span>您筛选的手机:& lt;/span>
& lt;马克v=跋?在obj"指数;在{{项}}& lt; em @click=暗露?指数项)“祝辞X & lt;/mark>
& lt;/div>
& lt; ul id=癰rand"祝辞
& lt;李v=跋?在json"指数;比;
& lt; span> {{item.title}} & lt;/span>
& lt; a href=?”;rel=巴獠縩ofollow"在item.list" v=拔?@click=疤砑?指数(i)“在{{我}}& lt;/a>
& lt;/li>
& lt;/ul>
& lt;/div>
& lt; script>
var json=[{
标题:“品牌“,
列表:[“苹果“,“小米“,“三星“,“vivo",“OPPO",“华为“)
},
{
标题:“内存“,
列表(“4 gb",:“8 gb",“2 gb",“3 gb以下“,“8 gb以上“)
},
{
标题:“存储“,
列表:[“8 gb",“16 gb",“32 gb",“64 gb以下“,“128 gb以上“)
},
{
标题:“尺寸“,
列表:[“4.5英寸“,“5.5英寸以上“,“4英寸以下“)
},
];
var vm=new Vue ({
埃尔:“# product"
数据:{
json,
obj: {}
},
方法:{
添加(指数(i) {
美元。集(this.obj指数,我);
},
德尔(指数){
美元。删除(this.obj,指数);
}
}
});
& lt;/script>
& lt;/body>
& lt;/html>
本篇文章给大家分享的是有关使用vue实现单一筛选和删除筛选条件,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。
效果预览:
代码如下:
以上就是使用vue实现单一筛选和删除筛选条件,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注行业资讯频道。
