<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="format-detection" content="telephone=no">
<meta meta name ="keywords" Content="allenyMiky,筛选,Vue"/＞
<!--相关CSS引入-->
<link rel='stylesheet' type='text/css' href='./mutilQuery.css'/>
</head>
<body>
<div id='app'>
<template v-if='condition.length'>
<div>
<span>已选中:<span>
<span v-for='(item,index) in condition' class='active'>{{item.name}} | </span>
</div>
</template>
<template v-if='category.length'>
<div class='nav' v-for='(items,index) in category'>
<div class='mutil-query-title' v-if='items.name' :key="items.id">{{items.name}}<span style='margin-left: 20px;' @click='allIn(index)'>全选</span>|<span @click='remove(index)'>清空</span></div>
<ol v-if='items.items.length'>
<li v-for='(item,key) in items.items'>
<span :class="{'active':item.active}" @click='handle(index,key)' :key='item.id'>{{item.name}}</span>
</li>
</ol>
</div>
</template>
</div>
<!--相关JS引入-->
<script src="./vue.min.js"></script>
<script type='text/javascript' src="./mutilQuery.js"></script>
</body>
</html>
基于Vue实现的多条件筛选功能(类似京东和淘宝功能)
3星 · 超过75%的资源 需积分: 50 124 浏览量
2018-05-29
14:34:18
上传
评论 6
收藏 32KB RAR 举报 
mutilQuery.rar （4个子文件） 
mutilQuery 
mutilQuery.html 1KB
mutilQuery.css 432B vue.min.js 84KB mutilQuery.js 2KB
技术大头
- 粉丝: 4
- 资源: 17
- 1
- 2
前往页