vue 点击事件清除原来的样式[更换样式]

vue 点击事件清除原来的样式[更换样式]

记录一下学习Vue的过程中的小demo
话不多说上案例：

<div class="title">
          <el-row type="flex" justify="center">
            <el-col :span="2"  v-for="index in typeList">
              <div class="chainBlue" @click="getInfoList(index.dictValue)" :class="{ chainOrange: activeNav === index.dictValue }" >
                <span>{{index.dictLabel}}</span>
              </div>
            </el-col>
          </el-row>
			  </div>

	data(){
		  return{
        datalist:[],
        typeList:[],
        activeNav:0,
		  }
		},
  getInfoList(index){
  //点击事件传入参数 
        this.activeNav = index;
        getTypeInfo(index).then(response => {
          this.datalist = response.data;
        });
      },

还有就是我前端页面数据遍历出来的 总共显示六条 一行显示三条数据
flex-direction：主轴方向，它决定了容器内元素排列方向
flex-direction: row 默认值，沿水平主轴从左到右排列，起点在左沿
flex-wrap:wrap 换行，第一行在上面

<div class="content">
          <el-row type="flex" justify="center"  style="flex-wrap: wrap; flex-direction: row">
            <el-col :span="8"  v-for="item in datalist" >
              <div class="kuang">
                <span>{{item.name}}</span><br>
                <span>融资需求：<i>{{item.need}}</i></span><br>
                <span>项目简介：<br>
                  <span>{{item.companyDesc}}</span>
                </span>
              </div>
            </el-col>
          </el-row>
			 </div>

还遇到了一个样式问题最后用translate在相对的空间内，实现水平和垂直居中
transform: translateX(x); /沿X轴方向平移/
transform: translateY(y); /沿Y轴方向平移/
transform: translate(x, y); /沿X轴和Y轴同时平移/