使用三元表达式为类选择器给值。当变量active被点击赋值时则,引用active样式。无点击使用Classification样式。

往往就是简单的操作,就把自己玩懵逼了!写半天报找不到Classification,还在想诶?Classification不是变量啊。一脸懵逼。最后发现'active':'Classification'。没加''。(日常自己坑自己)

效果图:

 

<div v-for="(item,index) in data">
	<span :class="active==item.type?'active':'Classification'" @click="oncheck(item.type)">        
         {{item.type}}</span>
</div>

js:

data() {
	return {
		data: [{
			    type: '66P'
			}, {
			    type: '760P'
			}, {
			    type: '(含16G系统优盘)660P'
			}, {
			    type: '(含16G系统优化盘)760P'
			}],
			active:''
			}
},

methods: {
    oncheck(name){
		 console.log(name)
		 this.active=name
	}
}

css:

.active{
		float: left;
		margin-left: 10px;
		padding: 10px;
		background: #efc531;
		margin-bottom: 10px;
		border-radius: 4px;
		font-size: 14px;
	}
.Classification {
		float: left;
		margin-left: 10px;
		padding: 10px;
		background: #f7f7f7;
		margin-bottom: 10px;
		border-radius: 4px;
		font-size: 14px;
	}

 

Logo

前往低代码交流专区

更多推荐