当前点击处更改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;
    }

你可能感兴趣的:(vue,javascript,css)