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 相关文章推荐
bgsound 背景音乐 的一些常用方法及特殊用法小结
May 11 Javascript
JS 文件传参及处理技巧分析
May 13 Javascript
jquery dialog键盘事件代码
Aug 01 Javascript
javascript date格式化示例
Sep 25 Javascript
利用javascript实现web页面中指定区域打印
Oct 30 Javascript
js控制网页前进和后退的方法
Jun 08 Javascript
Js操作DOM元素及获取浏览器高宽的简单方法
Sep 08 Javascript
jQuery 遍历map()方法详解
Nov 04 Javascript
js实现仿购物车加减效果
Mar 01 Javascript
Bootstrap进度条与AJAX后端数据传递结合使用实例详解
Apr 23 Javascript
移动端效果之Swiper详解
Oct 09 Javascript
JS highcharts动态柱状图原理及实现
Oct 16 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
Mysql和网页显示乱码解决方法集锦
2008/03/27 PHP
php生成短网址示例
2014/05/05 PHP
PHP获取photoshop写入图片文字信息的方法
2015/03/31 PHP
php实现中文字符截取防乱码方法汇总
2015/04/29 PHP
利用PHP将部分内容用星号替换
2020/04/21 PHP
PHP+JS实现的实时搜索提示功能
2018/03/13 PHP
jQuery使用动态渲染表单功能完成ajax文件下载
2013/01/15 Javascript
iframe如何动态创建及释放其所占内存
2014/09/03 Javascript
jQuery简单实现遍历数组的方法
2015/04/14 Javascript
简单介绍JavaScript中字符串创建的基本方法
2015/07/07 Javascript
jQuery下拉美化搜索表单效果代码分享
2015/08/25 Javascript
js实现黑色简易的滑动门网页tab选项卡效果
2015/08/31 Javascript
微信小程序链接传参并跳转新页面
2016/11/29 Javascript
关于ES6的六个小特性(二)
2017/02/20 Javascript
微信小程序实现页面跳转传值的方法
2017/10/12 Javascript
手把手教你vue-cli单页到多页应用的方法
2018/05/31 Javascript
JavaScript解决浮点数计算不准确问题的方法分析
2018/07/09 Javascript
jQuery点击页面其他部分隐藏下拉菜单功能
2018/11/27 jQuery
深入了解JavaScript 防抖和节流
2019/09/12 Javascript
VUE 组件转换为微信小程序组件的方法
2019/11/06 Javascript
vue+ESLint 配置保存 自动格式化代码
2020/03/17 Javascript
Json实现传值到后台代码实例
2020/06/30 Javascript
python利用sklearn包编写决策树源代码
2017/12/21 Python
使用keras时input_shape的维度表示问题说明
2020/06/29 Python
关于pycharm 切换 python3.9 报错 ‘HTMLParser‘ object has no attribute ‘unescape‘ 的问题
2020/11/24 Python
html5视频播放_动力节点Java学院整理
2017/07/13 HTML / CSS
学生学习总结的自我评价
2013/10/22 职场文书
九年级家长会邀请函
2014/01/15 职场文书
优秀志愿者事迹材料
2014/02/03 职场文书
采购类个人求职的自我评价
2014/02/18 职场文书
《秋姑娘的信》教学反思
2014/02/28 职场文书
公司委托书范本5篇
2014/09/20 职场文书
乌镇导游词
2015/02/02 职场文书
优胜劣汰,强者为王——读《鲁滨逊漂流记》有感
2019/08/15 职场文书
人生一定要学会的三样东西:放下、忘记、珍惜
2019/08/21 职场文书
python基础入门之普通操作与函数(三)
2021/06/13 Python