当前点击处更改class显示样式

实现效果:点击到哪里哪里会显示.active里的样式
html部分

<div class="type_item" 
	:class="{ active:index==typeActive }" v-for="(item, index) in itemList"
    @click="changeTypeColor(index)">{
   
   {item.text}}</div>

js

     data() {
    
    
         return {
    
                    
             typeActive: false,
             itemList: [
                 {
    
     text: '111' },
                 {
    
     text: '222' },
                 {
    
     text: '333' },
                 {
    
     text: '444' }
             ]
         };
     },
     methods: {
    
                
         changeTypeColor: function (index) {
    
    
             this.typeActive = index;
         },
     },

css部分样式随意

.active {
    
    
        width: 100%;
        height: 50%;
        background-color: #ddd;
        font-size: 10px;
        line-height: 30px;
        cursor: pointer;
    }

猜你喜欢

转载自blog.csdn.net/m0_46538057/article/details/111637418
今日推荐