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实战教程》

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 基于Vue实现的多条件筛选功能的详解(类似京东和淘宝功能)

    基于Vue实现的多条件筛选功能的详解(类似京东和淘宝功能)

    基于Vue实现的多条件筛选功能(类似京东和淘宝功能),可以支持多选.清空.全选功能,数据源是通过JSon格式的数据封装而成. 实现的效果图: 代码实现如下: html: <div id='app'> <template v-if='condition.length'> <div> <span>已选中:<span> <span v-for='(item,index) in condition' class='active'>{{item

  • vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据

    vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据

    直接贴代码了: 先上输入前的样子: <style> #example{margin:100px auto;width:600px;} .show{margin:10px;} #searchText{display: block;margin:0 auto 10px;height:24px;line-height: 24px;width:200px;} .content ul li{text-align: center;} .content ul li span{display: inline-

  • VUE实现移动端列表筛选功能

    最近兴趣所致,打算使用vant搭建一个webapp,由于需要使用列表筛选,没有找到合适组件,于是写了一个简单的功能,权当记录. 效果如下: HTML: <div class="filterbar"> <div class="filterbar-title"> <ul class="title-ul"> <li :class="{'title-li':true, 'current': item.i

  • vuejs实现本地数据的筛选分页功能思路详解

    vuejs实现本地数据的筛选分页功能思路详解

    今天项目需要一份根据本地数据的筛选分页功能,好吧,本来以为很简单,网上搜了搜全是ajax获取的数据,这不符合要求啊,修改起来太费力气,还不如我自己去写,不多说直接上代码 效果图: 项目需要:点击左侧进行数据筛选,实现自动分页,自动生成页数,点击自动跳转 项目代码:js代码 var subList=new Vue({ el:'#main', data:{ // subcontentData为本地数据 subContents:subcontentData, // 页面需要展现的数据 yemianda

  • Vue+Node实现商品列表的分页、排序、筛选，添加购物车功能详解

    本文实例讲述了Vue+Node实现商品列表的分页.排序.筛选,添加购物车功能.分享给大家供大家参考,具体如下: 1.分页 商品列表的分页实现是后台根据前端请求的页面大小.页码位置,去数据库中查询指定位置的数据然后返回给前端.比如页面大小为8,要查第3页的数据,则跳过2*8条数据,然后返回接下来的8条数据. 实现滚动加载:页面刚一加载完成并不需要请求所有数据,只显示一部分.当用户下拉到页面底部时,再去请求数据并拼接到商品数据列表中.通过vue-infinite-scroll插件实现滚动加载,在框架

  • vue input输入框关键字筛选检索列表数据展示

    想必大家在项目开发中难免会用到关键字筛选的功能,正好这次项目有需求要做这一块,就整理一下vue的input输入框输入关键字检索数据列表的代码.下面直接上代码: html: <!-- 筛选demo --> <template> <div> <input type="text" v-model="search"> <ul> <!-- 注意!注意!注意!这里循环遍历的是items,不再是data里的list

  • vue+elementUI实现表格关键字筛选高亮

    vue+elementUI实现表格关键字筛选高亮

    本文实例为大家分享了vue elementUI表格关键字筛选高亮的具体代码,供大家参考,具体内容如下 代码: <template> <div class=""> <div class="top"> <!-- 筛选 --> <div class="screen"> <div style="width:30%">筛选:</div> <el-i

  • 使用vue-router beforEach实现判断用户登录跳转路由筛选功能

    在开发webApp的时候,考虑到用户体验,经常会把不需要调用个人数据的页面设置成游客可以访问,而当用户进入到一些需要个人数据的,例如购物车,个人中心,我的钱包等等,在进行登录的验证判断,如果判断已经登录,则显示页面,如果判断未登录,则直接跳转到登录页面提示用户登录,今天就来分享下如何使用vue-router的beforEach方法来实现这个需求. 实现 本篇文章默认您已经会使用 webpack 或者 vue-cli 来进行环境的搭建,并且具有一定的vue基础,如果您目前是一个新手,那么网上搜索一

  • Vue.js实现多条件筛选、搜索、排序及分页的表格功能

    Vue.js实现多条件筛选、搜索、排序及分页的表格功能

    与上篇实践教程一样,在这篇文章中,我将继续从一种常见的功能--表格入手,展示Vue.js中的一些优雅特性.同时也将对filter功能与computed属性进行对比,说明各自的适用场景,也为vue2.0版本中即将删除的部分filter功能做准备. 需求分析 还是先从需求入手,想想实现这样一个功能需要注意什么.大致流程如何.有哪些应用场景. 表格本身是一种非常常用的组件,用于展示一些复杂的数据时表现很好. 当数据比较多时,我们需要提供一些筛选条件,让用户更快列出他们关注的数据. 除了预设的一些筛选条

  • Vue通过input筛选数据

    本文实例为大家分享了Vue通过input筛选数据的具体代码,供大家参考,具体内容如下 <div id="app"> <input v-model='search' /> <ul> <li v-for="item in items"> <label>价格</label><span v-html="item.name"></span> <label&

随机推荐