在data里定义一个变量priceFilter
priceFilter:[ { startPrice:'0.00', endPrice:'500.00' }, { startPrice:'500.00', endPrice:'1000.00' }, { startPrice:'1000.00', endPrice:'1500.00' }, ],
<dd v-for="(price,index) in priceFilter">//价格渲染
<a href="javascript:void(0)" @click="priceChecked=index" v-bind:class="{'cur':priceChecked==index}"> {{price.startPrice}} - {{price.endPrice}}</a>
</dd>
2.默认选择all
在data里声明一个变量 priceChecked:'all',
第一步要绑定一个样式: v-bind:class="{'cur':priceChecked=='all'}"
再点击事件 @click="priceChecked='all'"
3.当要切换价格过滤时,要考虑到索引
绑定样式:v-bind:class="{'cur':priceChecked==index},,,,,再绑定一个 @click="priceChecked=index"
4.响应式开发所以,当页面足够小的时候,价格过滤会消失,点击filterby会弹出价格过滤,并且单击任意一个价格区间后,再次点击遮罩,该价格过滤页面才会消失.
所以给 Filter by添加点击事件 @click="showFilterPop"
<a href="javascript:void(0)" class="filterby stopPop" @click="showFilterPop">Filter by</a>
给价格过滤绑定一个class,通过filterBy的值来控制价格过滤的隐藏,
<div class="filter stopPop" id="filter" v-bind:class="{'filterby-show':filterBy}">//filterBy是变量,filterby-show是属性名
给遮罩也添加事件,点击遮罩,价格过滤和遮罩都消失
<div class="md-overlay" v-show="overLayFlag" @click="closePop"></div>
在data里定义2个变量,一个控制价格过滤的显示与隐藏,一个控制遮罩的显示与隐藏
filterBy:false, overLayFlag:false,
这是添加的方法和事件
showFilterPop(){ this.filterBy = true; this.overLayFlag = true; }, closePop(){ this.filterBy = false; this.overLayFlag = false; },
这样搞好之后,点击filterby会弹出价格过滤,并且单击任意一个价格区间后,再次点击遮罩,该价格过滤页面才会消失.,如何点单击任意一个价格区间后,价格过滤和遮罩都消失呢
这时就需要把@click="priceChecked=index" 换成 @click="setPriceFilter(index)",再编写这个方法
setPriceFilter(index){ this.priceChecked = index; this.closePop(); }