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下拉选择框Select组件使用详解(一)
这篇文章主要为大家详细介绍了Vue下拉选择框Select组件的使用，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-03-03
vue实现学生信息管理系统
这篇文章主要为大家详细介绍了vue实现学生信息管理系统，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-05-05
编写 Vue v-for 循环的 7 种方式
这篇文章主要分享可编写 Vue v-for 循环的 7 种方式，在Vue中，基本上每个项目都会用到v-for循环。它们允许你在模板代码中编写for循环，接下来一起看看下面文章的详细介绍吧
2021-12-12
解析vue 3.0 使用axios库发起 post get 的配置过程
get post 请求开发中最普通最常见的请求方式但是在vue中如何实现呢这里记录一下配置过程，对vue 使用axios发起 post get配置过程感兴趣的朋友一起看看吧
2022-05-05
vue项目中企业微信使用js-sdk时config和agentConfig配置方式详解
这篇文章主要介绍了vue项目中企业微信使用js-sdk时config和agentConfig配置,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2020-12-12
一文详解Vue如何整合Echarts实现可视化界面
ECharts，缩写来自Enterprise Charts，商业级数据图表，一个纯Javascript的图表库，可以流畅的运行在PC和移动设备上。本文将在Vue中整合Echarts实现可视化界面，感兴趣的可以了解一下
2022-04-04
vue.js声明式渲染和条件与循环基础知识
这篇文章主要为大家详细介绍了vue.js声明式渲染和条件与循环的基础知识，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-07-07
关于element-ui中el-form自定义验证(调用后端接口)
这篇文章主要介绍了关于element-ui中el-form自定义验证(调用后端接口)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-07-07
vue项目使用node连接数据库的方法(前后端分离)
这篇文章主要介绍了vue项目使用node连接数据库（前后端分离），本文结合示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2022-12-12
VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
在开发中，需要表格控件根据浏览器高度进行调整，固定表头，本文主要介绍了VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法，非常具有实用价值，需要的朋友可以参考下
2018-11-11