vue.js切换标签选中样式更改

vue.js切换标签选中样式更改

博主想做一个标签，用来选中所选相保存到数据列表中，同时选中标签后更改其样式，但是遇到了点小小的问题，网上更改标签的样式不一，所用的方法也比较复杂，所以博主就想着自己能不能写一个比较简单的方法。

功能实现

其实博主想到的方法很简单，就是保存一个css的类，当标签被选中时，存入数据并且给标签添加一个类，等改变数据后，再移除类。
数据格式如下

`data(){
            return{
                typeList:['区域','公司','高校'],
                areaList:["不限","天河区","越秀区","海珠区","番禺区","花都区","白云区","黄埔区","萝岗区"],
                priceList:['不限','1000以下','1000-2000','2000-3000','3000-4000','4000以上'],
                roomTypeList:['不限','1室','2室','3室','4室及以上'],
                sizeList:['不限','50㎡以下','50㎡-70㎡','70㎡-90㎡','90㎡-120㎡','120㎡以上'],
                orderList:['默认','租金▼','面积▼','时间▼'],
                selected:{
                    type:'区域',
                    area:'不限',
                    price:'不限',
                    roomType:'不限',
                    size:'不限',
                }
            }
        },`

然后用v-for很容易就把标签做好了（注意这里的class用了一个三目运算 (selected.type===types)?‘active’:’’" ），表示当前选中的样式是否和数据列表中的样式相符合，符合则增加新的样式 .active

      <div id="tabs">
                <span><label>类型</label><a v-for="(types,index) in typeList" :class="(selected.type===types)?'active':''"  @click="typechange(types)" href="#">{{types}} </a> </span>
                <hr />
                <span><label>区域</label><a v-for="(area,index) in areaList" href="#" :class="(selected.area===area)?'active':''"  @click="areachange(area)" >{{area}} </a> </span>
                <span><label>价格</label><a v-for="(price,index) in priceList" href="#" :class="(selected.price===price)?'active':''"  @click="pricechange(price)" >{{price}} </a> </span>
                <span><label>房型</label><a v-for="(roomType,index) in roomTypeList" href="#" :class="(selected.roomType===roomType)?'active':''"  @click="roomTypechange(roomType)">{{roomType}} </a> </span>
                <span><label>面积</label><a v-for="(size,index) in sizeList" href="#" :class="(selected.size===size)?'active':''"  @click="sizechange(size)">{{size}} </a> </span>
            </div>

最后我们定义一个类用来当标签选中时锁定

.active{
        background-color: #ff0a60;
        color: white;
    }

然后调用方法来更改数据列表中的数据，该列表还可以方便后期数据的存读取。

 methods:{
            typechange(input){
                if(!input) return false;
                if(input !== this.selected.type)
                {
                    this.selected.type = input;
                }
            },
            areachange(input){
                if(!input) return false;
                if(input !== this.selected.area)
                {
                    this.selected.area = input;
                }
            },
            pricechange(input){
                if(!input) return false;
                if(input !== this.selected.price)
                {
                    this.selected.price = input;
                }
            },
            roomTypechange(input){
                if(!input) return false;
                if(input !== this.selected.roomType)
                {
                    this.selected.roomType = input;
                }
            },
            sizechange(input){
                if(!input) return false;
                if(input !== this.selected.size)
                {
                    this.selected.size = input;
                }
            },
            orderchange(input){
                if(!input) return false;
                if(input !== this.selected.order)
                {
                    this.selected.order = input;
                }
            }
        },

搞定~！