价格筛选

请观赏

<template>
    <div>
        <dl>
          <dd><a href="javascript:void(0)" :class="{'active':priceChecked=='all'}" @click="priceChecked='all'">All</a></dd>
          <dd v-for="(price,index) in priceFilter" :key="index">
            <a href="javascript:void(0)" @click="priceChecked=index" :class="{'active':priceChecked==index}">{{price.startPrice}} - {{price.endPrice}}</a>
          </dd>
        </dl>
    </div>
</template>

<script>
export default {
    name:"Home",
    data(){
        return{
            priceFilter:[
                {
                    startPrice:'0.00',
                    endPrice:'500.00'
                },
                {
                    startPrice:'500.00',
                    endPrice:'1000.00'
                },
                {
                    startPrice:'1000.00',
                    endPrice:'2000.00'
                },
            ],
            priceChecked:'all',
        }
    }

}
</script>

<style>
.active{
    border-left: 2px solid red;
     color: red;
}
dl dd a:hover{
    border-left: 2px solid red;
    color: red;
}
</style>