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中的$.getJSON 使用说明
Mar 10 Javascript
jquery实现checkbox 全选/全不选的通用写法
Feb 22 Javascript
JavaScript 实现打印,打印预览,打印设置
Dec 30 Javascript
JavaScript获得当前网页来源页面(即上一页)的方法
Apr 03 Javascript
浅谈angular.js中实现双向绑定的方法$watch $digest $apply
Oct 14 Javascript
AngularJS中比较两个数组是否相同
Aug 24 Javascript
js自定义弹框插件的封装
Aug 24 Javascript
详解用node搭建简单的静态资源管理器
Aug 09 Javascript
微信小程序之发送短信倒计时功能
Aug 30 Javascript
vue-cli启动本地服务局域网不能访问的原因分析
Jan 22 Javascript
Vue中的scoped实现原理及穿透方法
May 15 Javascript
微信小程序封装自定义弹窗的实现代码
May 08 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/02/06 PHP
PHP通用检测函数集合
2011/02/08 PHP
记录PHP错误日志 display_errors与log_errors的区别
2012/10/09 PHP
ThinkPHP设置禁止百度等搜索引擎转码(简单实用)
2016/02/15 PHP
php is_writable判断文件是否可写实例代码
2016/10/13 PHP
简单实现php上传文件功能
2017/09/21 PHP
php根据命令行参数生成配置文件详解
2019/03/15 PHP
Jquery 获取表单text,areatext,radio,checkbox,select值的代码
2009/11/12 Javascript
JavaScript与Image加载事件(onload)、加载状态(complete)
2011/02/14 Javascript
javascript开发随笔二 动态加载js和文件
2011/11/25 Javascript
jquery实现的随机多彩tag标签随机颜色和字号大小效果
2014/03/27 Javascript
js获取网页可见区域、正文以及屏幕分辨率的高度
2014/05/15 Javascript
jQuery添加/改变/移除CSS类及判断是否已经存在CSS
2014/08/20 Javascript
使用Browserify配合jQuery进行编程的超级指南
2015/07/28 Javascript
完善的jquery处理机制
2016/02/21 Javascript
js实现楼层效果的简单实例
2016/07/15 Javascript
plupload+artdialog实现多平台上传文件
2016/07/19 Javascript
jQuery焦点图左右转换效果
2016/12/12 Javascript
利用jQuery实现滑动开关按钮效果(附demo源码下载)
2017/02/07 Javascript
JavaScript中各数制转换全面总结
2017/08/21 Javascript
jQuery实现的记住帐号密码功能完整示例
2019/08/03 jQuery
解决VUE项目localhost端口服务器拒绝连接,只能用127.0.0.1的问题
2020/08/14 Javascript
javascript实现点击按钮切换轮播图功能
2020/09/23 Javascript
[08:53]DOTA2每周TOP10 精彩击杀集锦vol.9
2014/06/26 DOTA
Python实现的人工神经网络算法示例【基于反向传播算法】
2017/11/11 Python
Django生成PDF文档显示网页上以及PDF中文显示乱码的解决方法
2019/12/17 Python
HTML5网页音乐播放器的示例代码
2017/11/09 HTML / CSS
使用Canvas操作像素的方法
2018/06/14 HTML / CSS
html5 canvas绘制网络字体的常用方法
2019/08/26 HTML / CSS
Ray-Ban雷朋西班牙官网:全球领先的太阳眼镜品牌
2018/11/28 全球购物
平面设计专业求职信
2014/08/09 职场文书
2014超市双十一活动策划方案
2014/09/29 职场文书
参观邀请函范文
2015/02/02 职场文书
法院个人总结
2015/03/03 职场文书
小学运动会入场词
2015/07/18 职场文书
nginx 防盗链防爬虫配置详解
2021/03/31 Servers