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 相关文章推荐
JS加ASP二级域名转向的代码
May 17 Javascript
鼠标事件延时切换插件
Mar 12 Javascript
jQuery实现返回顶部功能适合不支持js的浏览器
Aug 19 Javascript
JS实现的文字与图片定时切换效果代码
Oct 06 Javascript
JavaScript判断是否是微信浏览器
Jun 13 Javascript
jQuery操作cookie
Aug 08 Javascript
angular源码学习第一篇 setupModuleLoader方法
Oct 20 Javascript
DropDownList控件绑定数据源的三种方法
Dec 24 Javascript
JavaScript中数组的各种操作的总结(必看篇)
Feb 13 Javascript
javascript实现日历效果
Jun 17 Javascript
vue使用原生swiper代码实例
Feb 05 Javascript
vue 自定义的组件绑定点击事件
Apr 21 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 explode()函数用法、切分字符串
2012/10/03 PHP
php之XML转数组函数的详解
2013/06/07 PHP
解析阿里云ubuntu12.04环境下配置Apache+PHP+PHPmyadmin+MYsql
2013/06/26 PHP
CI(CodeIgniter)模型用法实例分析
2016/01/20 PHP
Yii2中Restful API原理实例分析
2016/07/25 PHP
一个JavaScript继承的实现
2006/10/24 Javascript
document.documentElement和document.body区别介绍
2013/09/16 Javascript
JQuery中的事件及动画用法实例
2015/01/26 Javascript
JavaScript插件化开发教程(五)
2015/02/01 Javascript
Java中Timer的用法详解
2015/10/21 Javascript
使用JS实现图片展示瀑布流效果(简单实例)
2016/09/06 Javascript
JS实现六边形3D拖拽翻转效果的方法
2016/09/11 Javascript
原生JS实现几个常用DOM操作API实例
2017/01/19 Javascript
React key值的作用和使用详解
2018/08/23 Javascript
vue监听input标签的value值方法
2018/08/27 Javascript
详解npm 配置项registry修改为淘宝镜像
2018/09/07 Javascript
在vue中把含有html标签转为html渲染页面的实例
2019/10/28 Javascript
[20:46]Ti4循环赛第三日VG vs DK
2014/07/12 DOTA
[07:59]2014DOTA2叨叨刀塔 林熊猫称被邀请赛现场盛况震撼
2014/07/21 DOTA
[01:18:33]Secret vs VGJ.S Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
pandas数据框,统计某列数据对应的个数方法
2018/04/11 Python
python计算列表内各元素的个数实例
2018/06/29 Python
详解Python中的正则表达式
2018/07/08 Python
使用python实现希尔、计数、基数基础排序的代码
2019/12/25 Python
wxPython修改文本框颜色过程解析
2020/02/14 Python
用CSS3实现无限循环的无缝滚动的示例代码
2017/11/01 HTML / CSS
加拿大鞋网:Globo Shoes
2019/12/26 全球购物
青年创业培训欢迎词
2014/01/08 职场文书
工程招投标邀请书
2014/01/26 职场文书
退伍老兵事迹材料
2014/01/31 职场文书
《两个铁球同时着地》教学反思
2014/02/13 职场文书
《水乡歌》教学反思
2014/04/24 职场文书
2014年行政执法工作总结
2014/12/11 职场文书
Python+OpenCV实现在图像上绘制矩形
2022/03/21 Python
Java 通过手写分布式雪花SnowFlake生成ID方法详解
2022/04/07 Java/Android
win10+RTX3050ti+TensorFlow+cudn+cudnn配置深度学习环境的方法
2022/06/25 Servers