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 相关文章推荐
使用JQuery和s3captche实现一个水果名字的验证
Aug 14 Javascript
javascript来定义类的规范小结
Nov 19 Javascript
关于jquery input textare 事件绑定及用法学习
Apr 03 Javascript
jQuery的slideToggle方法实例
May 07 Javascript
jquery 通过name快速取值示例
Jan 24 Javascript
Bootstrap中的Dropdown下拉菜单更改为悬停(hover)触发
Aug 31 Javascript
整理关于Bootstrap过渡动画的慕课笔记
Mar 29 Javascript
浅谈如何使用 webpack 优化资源
Oct 20 Javascript
vue2.0使用swiper组件实现轮播效果
Nov 27 Javascript
VueJs组件之父子通讯的方式
May 06 Javascript
angular4+百分比进度显示插件用法示例
May 05 Javascript
微信小程序转化为uni-app项目的方法示例
May 22 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
Search Engine Friendly的URL设计
2006/10/09 PHP
PHP支持多种格式图片上传(支持jpg、png、gif)
2011/11/03 PHP
如何使用纯PHP实现定时器任务(Timer)
2015/07/31 PHP
PHP中strncmp()函数比较两个字符串前2个字符是否相等的方法
2016/01/07 PHP
javascript整除实现代码
2010/11/23 Javascript
js的压缩及jquery压缩探讨(提高页面加载性能/保护劳动成果)
2013/01/29 Javascript
Extjs单独定义各组件的实例代码
2013/06/25 Javascript
jQuery满意度星级评价插件特效代码分享
2015/08/19 Javascript
JS实现3D图片旋转展示效果代码
2015/09/22 Javascript
Jquery检验手机号是否符合规则并根据手机号检测结果将提交按钮设为不同状态
2015/11/26 Javascript
javascript显示上周、上个月日期的处理方法
2016/02/03 Javascript
canvas学习之API整理笔记(一)
2016/12/29 Javascript
jQuery实现的简单拖动层示例
2017/02/22 Javascript
微信小程序报错:this.setData is not a function的解决办法
2017/09/27 Javascript
使用mint-ui实现省市区三级联动效果的示例代码
2018/02/09 Javascript
序列化模块json代码实例详解
2020/03/03 Javascript
JS快速实现简单计算器
2020/04/08 Javascript
vue3.0 上手体验
2020/09/21 Javascript
JS highcharts动态柱状图原理及实现
2020/10/16 Javascript
[02:48]DOTA2英雄基础教程 暗夜魔王
2013/12/12 DOTA
Django 前后台的数据传递的方法
2017/08/08 Python
对python numpy.array插入一行或一列的方法详解
2019/01/29 Python
解析python的局部变量和全局变量
2019/08/15 Python
Python3使用xml.dom.minidom和xml.etree模块儿解析xml文件封装函数的方法
2019/09/23 Python
如何用PyPy让你的Python代码运行得更快
2020/12/02 Python
HTML5实现视频直播功能思路详解
2017/11/16 HTML / CSS
逃课上网检讨书
2014/02/20 职场文书
《李时珍夜宿古寺》教学反思
2014/04/09 职场文书
投资建议书模板
2014/05/12 职场文书
公司总经理助理岗位职责
2014/07/09 职场文书
信用卡工作证明模板
2014/09/14 职场文书
导游词之沈阳清昭陵
2019/12/28 职场文书
Python离线安装openpyxl模块的步骤
2021/03/30 Python
js之ajax文件上传
2021/05/13 Javascript
JavaScript函数柯里化
2021/11/07 Javascript
python模板入门教程之flask Jinja
2022/04/11 Python