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 判断页面元素是否存在的代码
Aug 14 Javascript
IE之动态添加DOM节点触发window.resize事件
Jul 27 Javascript
读jQuery之一(对象的组成)
Jun 11 Javascript
jQuery实现图片放大预览实现原理及代码
Sep 12 Javascript
javascript的渐进增强与平稳退化浅谈
Nov 12 Javascript
Javascript显示和隐藏ul列表的方法
Jul 15 Javascript
关于javascript的一些知识以及循环详解
Sep 12 Javascript
完美解决手机浏览器顶部下拉出现网页源或刷新的问题
Nov 30 Javascript
微信小程序有旋转动画效果的音乐组件实例代码
Aug 22 Javascript
webpack4.0 入门实践教程
Oct 08 Javascript
react 兄弟组件如何调用对方的方法示例
Oct 23 Javascript
解决vuex数据页面刷新后初始化操作
Jul 26 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代码
2006/12/06 PHP
谨慎使用PHP的引用原因分析
2012/09/06 PHP
关于二级目录拖拽排序的实现(源码示例下载)
2013/04/26 PHP
使用PHP实现阻止用户上传成人照片或者裸照
2014/12/25 PHP
php数组键名技巧小结
2015/02/17 PHP
php将print_r处理后的数据还原为原始数组的解决方法
2016/11/02 PHP
Zend Framework前端控制器用法示例
2016/12/11 PHP
javascript的函数、创建对象、封装、属性和方法、继承
2011/03/10 Javascript
推荐10个2014年最佳的jQuery视频插件
2014/11/12 Javascript
JavaScript函数柯里化详解
2016/04/29 Javascript
老司机带你解读jQuery插件开发流程
2016/05/16 Javascript
原生JS封装ajax 传json,str,excel文件上传提交表单(推荐)
2016/06/21 Javascript
浅谈JS读取DOM对象(标签)的自定义属性
2016/11/21 Javascript
Bootstrap中datetimepicker使用小结
2016/12/28 Javascript
AngularJS实现的回到顶部指令功能实例
2017/05/17 Javascript
Node.js 8 中的重要新特性
2017/06/28 Javascript
JS实现的倒计时恢复按钮点击功能【可用于协议阅读倒计时】
2018/04/19 Javascript
js中的 || 与 &amp;&amp; 运算符详解
2018/05/24 Javascript
解决layui动态添加的元素click等事件触发不了的问题
2019/09/20 Javascript
简单了解vue 插值表达式Mustache
2020/07/22 Javascript
vue相同路由跳转强制刷新该路由组件操作
2020/08/05 Javascript
Angular+Ionic使用queryParams实现跳转页传值的方法
2020/09/05 Javascript
[49:29]LGD vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
python通过floor函数舍弃小数位的方法
2015/03/17 Python
python实现m3u8格式转换为mp4视频格式
2018/02/28 Python
Python面向对象类的继承实例详解
2018/06/27 Python
Python 一键制作微信好友图片墙的方法
2019/05/16 Python
Python3 执行Linux Bash命令的方法
2019/07/12 Python
tensorflow查看ckpt各节点名称实例
2020/01/21 Python
Python如何爬取b站热门视频并导入Excel
2020/08/10 Python
css3 position fixed固定居中问题解决方案
2014/08/19 HTML / CSS
详解CSS3中nth-child与nth-of-type的区别
2017/01/05 HTML / CSS
初中高效课堂实施方案
2014/02/26 职场文书
地理科学专业自荐信
2014/09/01 职场文书
2014司机年终工作总结
2014/12/05 职场文书
前端框架ECharts dataset对数据可视化的高级管理
2022/12/24 Javascript