vue实现单一筛选、删除筛选条件
更新时间：2020年10月26日 13:24:31 作者：Serena_tz
这篇文章主要为大家详细介绍了vue实现单一筛选、删除筛选条件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue实现单一筛选、删除筛选条件的具体代码，供大家参考，具体内容如下
效果预览：
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="vue.v2.6.10.js"></script>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
a {
color: #333;
text-decoration: none;
}
a:hover {
color: red
}
#product {
width: 700px;
margin: 20px auto;
background: #f2f2f2;
border: 1px solid #ddd;
}
ul {
padding: 10px;
}
#filter {
padding: 0 10px;
height: 40px;
line-height: 40px;
background-color: #ddd
}
#brand span {
display: inline-block;
margin-right: 30px;
}
#brand a {
margin: 0 5px;
}
#brand li {
margin-bottom: 10px;
}
mark {
border: 1px solid red;
padding-left: 5px;
margin-right: 15px;
}
mark em {
border-left: 1px solid red;
padding: 0 5px;
margin-left: 5px;
font-style: normal;
}
</style>
</head>
<body>
<div id="product">
<div id="filter">
<span>您筛选的手机：</span>
<mark v-for="item,index in obj">{{item}}<em @click="del(index,item)">X</em></mark>
</div>
<ul id="brand">
<li v-for="item,index in json">
<span>{{item.title}}</span>
<a href="#" rel="external nofollow" v-for="i in item.list" @click="add(index,i)">{{i}}</a>
</li>
</ul>
</div>
<script>
var json = [{
title: "品牌",
list: ["苹果", "小米", "三星", "vivo", "OPPO", "华为"]
},
{
title: "内存",
list: ["4GB", "8GB", "2GB", "3GB以下", "8GB以上"]
},
{
title: "存储",
list: ["8GB", "16GB", "32GB", "64GB以下", "128GB以上"]
},
{
title: "尺寸",
list: ["4.5英寸", "5.5英寸以上", "4英寸以下"]
},
];
var vm=new Vue({
el: "#product",
data: {
json,
obj:{}
},
methods:{
add(index,i){
this.$set(this.obj,index,i);
},
del(index){
this.$delete(this.obj,index);
}
}
});
</script>
</body>
</html>
关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。
更多vue学习教程请阅读专题《vue实战教程》
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
本文主要介绍了vue-draggable实现拖拽表单的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-05-05
这篇文章主要介绍了vue项目启动如何设置默认启动页问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
这篇文章主要介绍了Vue.js 中 axios 跨域访问错误问题及解决方法，非常不错，具有一定的参考借鉴价值 ,需要的朋友可以参考下2018-11-11
这篇文章主要给大家介绍了关于Vue中axios的封装的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者使用Vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-10-10
本篇文章主要介绍了Vue实现一个返回顶部backToTop组件，可以实现回到顶部效果，具有一定的参考价值，有兴趣的可以了解一下2017-07-07
关于iview和elementUI组件样式覆盖无效问题及解决
这篇文章主要介绍了关于iview和elementUI组件样式覆盖无效问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要介绍了Vue编写自定义Plugin详解,在Vue开发中，我们经常需要使用一些第三方库或功能性模块，Vue插件就是一种将这些库或模块集成到Vue应用中的方式,插件是Vue.js提供的一种机制，用于扩展Vue的功能,需要的朋友可以参考下2023-08-08
这篇文章主要为大家详细介绍了Vue左滑组件slider的使用，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-08-08
这篇文章主要为大家介绍了Element-ui中的Cascader级联选择器基础用法，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-06-06
这篇文章主要介绍了Vue3哈希模式实现锚点导航方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-04-04
最新评论