vue实现单一筛选、删除筛选条件


Posted in Javascript onOctober 26, 2020

本文实例为大家分享了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实战教程》

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
学习YUI.Ext 第六天--关于树TreePanel(Part 1)
Mar 10 Javascript
在JavaScript中获取请求的URL参数
Dec 22 Javascript
Extjs gridpanel 出现横向滚动条问题的解决方法
Jul 04 Javascript
seaJs的模块定义和模块加载浅析
Jun 06 Javascript
JS实现文档加载完成后执行代码
Jul 09 Javascript
jQuery判断元素是否显示 是否隐藏的简单实现代码
May 19 Javascript
JS内部事件机制之单线程原理
Jul 02 Javascript
Vue登录主页动态背景短视频制作
Sep 21 Javascript
微信小程序自定义tabBar在uni-app的适配详解
Sep 30 Javascript
JS表单验证插件之数据与逻辑分离操作实例分析【策略模式】
May 01 Javascript
js 动态校验开始结束时间的实现代码
May 25 Javascript
VueJS实现用户管理系统
May 29 Javascript
vue通过接口直接下载java生成好的Excel表格案例
Oct 26 #Javascript
基于elementUI竖向表格、和并列的案例
Oct 26 #Javascript
原生js实现贪吃蛇游戏
Oct 26 #Javascript
JavaScript实现五子棋小游戏
Oct 26 #Javascript
详解vue3.0 的 Composition API 的一种使用方法
Oct 26 #Javascript
vue3.0 加载json的方法(非ajax)
Oct 26 #Javascript
Vue+Element自定义纵向表格表头教程
Oct 26 #Javascript
You might like
php 正则匹配函数体
2009/08/25 PHP
PHP启动windows应用程序、执行bat批处理、执行cmd命令的方法(exec、system函数详解)
2014/10/20 PHP
php中FTP函数ftp_connect、ftp_login与ftp_chmod用法
2014/11/18 PHP
关于php 高并发解决的一点思路
2017/04/16 PHP
PHP tp5中使用原生sql查询代码实例
2020/10/28 PHP
JS 继承实例分析
2008/11/04 Javascript
checkbox全选/取消全选以及checkbox遍历jQuery实现代码
2009/12/02 Javascript
javascript实现的DES加密示例
2013/10/30 Javascript
15款jQuery分布引导插件分享
2015/02/04 Javascript
简介JavaScript中search()方法的使用
2015/06/06 Javascript
JavaScript实现cookie的写入、读取、删除功能
2015/11/05 Javascript
javascript HTML+CSS实现经典橙色导航菜单
2016/02/16 Javascript
全面解析Bootstrap中nav、collapse的使用方法
2016/05/22 Javascript
jQuery+Cookie实现切换皮肤功能【附源码下载】
2018/03/25 jQuery
vue.js数据绑定操作详解
2018/04/23 Javascript
分享5个顶级的JavaScript Ajax组件库
2018/09/16 Javascript
JS实现随机生成10个手机号的方法示例
2018/12/07 Javascript
JavaScript提升机制Hoisting详解
2019/10/23 Javascript
jQuery实现html可联动的百分比进度条
2020/03/26 jQuery
解决vue一个页面中复用同一个echarts组件的问题
2020/07/19 Javascript
antd的select下拉框因为数据量太大造成卡顿的解决方式
2020/10/31 Javascript
[53:43]VP vs NewBee Supermajor 胜者组 BO3 第三场 6.5
2018/06/06 DOTA
深入讲解Python中的迭代器和生成器
2015/10/26 Python
Python的socket模块源码中的一些实现要点分析
2016/06/06 Python
Python实现按学生年龄排序的实际问题详解
2017/08/29 Python
Python subprocess模块常见用法分析
2018/06/12 Python
使用Windows批处理和WMI设置Python的环境变量方法
2019/08/14 Python
CSS3制作炫酷的自定义发光文字
2016/03/28 HTML / CSS
NFL墨西哥官方商店:Tienda NFL
2017/11/28 全球购物
Currentbody法国:健康与美容高科技产品
2020/08/16 全球购物
C++程序员求职信范文
2014/04/14 职场文书
中班幼儿评语大全
2014/04/30 职场文书
计划生育标语
2014/06/23 职场文书
教师国庆节演讲稿范文2014
2014/09/21 职场文书
2015学习委员工作总结范文
2015/04/03 职场文书
vue 数字翻牌器动态加载数据
2022/04/20 Vue.js