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

约定不等于承诺〃 2022-05-09 07:54 152阅读 0赞

在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是属性名

给遮罩也添加事件,点击遮罩,价格过滤和遮罩都消失

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