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 相关文章推荐
用roll.js实现的图片自动滚动+鼠标触动的特效
Mar 18 Javascript
js url传值中文乱码之解决之道
Nov 20 Javascript
jQeury淡入淡出需要注意的问题
Sep 08 Javascript
js实现单一html页面两套css切换代码
Apr 11 Javascript
javascript动态的改变IFrame的高度实现自动伸展
Oct 12 Javascript
js中switch case循环实例代码
Dec 30 Javascript
jquery ajax请求方式与提示用户正在处理请稍等
Sep 01 Javascript
javascript运动框架用法实例分析(实现放大与缩小效果)
Jan 08 Javascript
JavaScript数组的一些奇葩行为
Jan 25 Javascript
Angular中使用MathJax遇到的一些问题
Dec 15 Javascript
Vue组件教程之Toast(Vue.extend 方式)详解
Jan 27 Javascript
vue组件是如何解析及渲染的?
Jan 13 Vue.js
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发送短信代码分享
2015/08/11 PHP
百度地图API使用方法详解
2015/08/25 PHP
PHP+Apache+Mysql环境搭建教程
2016/08/01 PHP
详解thinkphp中的volist标签
2018/01/15 PHP
分享5个非常有用的Laravel Blade指令
2018/05/30 PHP
js检测网络是否具体连接功能的代码
2014/05/23 Javascript
超炫的jquery仿flash导航栏特效
2014/11/11 Javascript
AngularJS学习笔记之依赖注入详解
2016/05/16 Javascript
jQuery简单实现页面元素置顶时悬浮效果示例
2016/08/01 Javascript
详解vue.js+UEditor集成 [前后端分离项目]
2017/07/07 Javascript
关于webpack2和模块打包的新手指南(小结)
2017/08/07 Javascript
自定义类似于jQuery UI Selectable 的Vue指令v-selectable
2017/08/23 jQuery
日期时间范围选择插件:daterangepicker使用总结(必看篇)
2017/09/14 Javascript
vue使用axios跨域请求数据问题详解
2017/10/18 Javascript
详述 Sublime Text 打开 GBK 格式中文乱码的解决方法
2017/10/26 Javascript
Javascript实现运算符重载详解
2018/04/07 Javascript
浅谈Angular6的服务和依赖注入
2018/06/27 Javascript
jQuery中使用validate插件校验表单功能
2019/05/24 jQuery
使用Python判断质数(素数)的简单方法讲解
2016/05/05 Python
Python中字典和集合学习小结
2017/07/07 Python
python语音识别实践之百度语音API
2018/08/30 Python
Python实现查找数组中任意第k大的数字算法示例
2019/01/23 Python
使用Python项目生成所有依赖包的清单方式
2020/07/13 Python
Python 使用生成器代替线程的方法
2020/08/04 Python
python unichr函数知识点总结
2020/12/16 Python
马来西亚最热门的在线时尚商店:FashionValet
2018/11/11 全球购物
大学英语演讲稿(中英文对照)
2014/01/14 职场文书
学校消防演习方案
2014/02/19 职场文书
文员转正自我鉴定怎么写
2014/09/29 职场文书
幼儿园校园小喇叭广播稿
2014/10/17 职场文书
大学生个人简历自荐信
2015/03/06 职场文书
团委工作总结2015
2015/04/02 职场文书
劳动争议仲裁代理词
2015/05/25 职场文书
资产移交协议书
2016/03/24 职场文书
Python OpenCV 彩色与灰度图像的转换实现
2021/06/05 Python
Java实现简单小画板
2022/06/10 Java/Android