价格渲染和价格区间的选择,以及响应式价格区间的隐藏与显示

在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();
}