js点击不同的按钮背景色随之改变--get网络请求方式不同的方法

1、切换效果===点击事件传递不同的参数实现切换效果，使用动态class实现切换时颜色随之改变

<div class="btn">
        <span
        //注意：index是从零开始的
        v-for="(item,ind ) in dayTimer" :key="ind"
          class="btns"
          @click="currentFn((ind+1))"
          :class="btnIndex == (ind+1) ? 'active' : ''"
          >{{item.name}}</span
        >
        <!-- <span
          class="btns btn1"
          @click="currentFn(1)"
          :class="btnIndex == 1 ? 'active' : ''"
          >今日</span
        >
        <span
          class="btns btn2"
          @click="currentFn(2)"
          :class="btnIndex == 2 ? 'active' : ''"
          >本周</span
        >
        <span
          class="btns btn3"
          @click="currentFn(3)"
          :class="btnIndex == 3 ? 'active' : ''"
          >本月</span
        >
        <span
          class="btns btn4"
          @click="currentFn(4)"
          :class="btnIndex == 4 ? 'active' : ''"
          >全部</span
        > -->
      </div>

      export default {
  name: "Index",
  data() {
    return {
      // 版本号
      version: "3.4.0",
      dayTimer:[
        {name:'今日'},
        {name:'本周'},
        {name:'本月'},
        {name:'全部'},
      ],
      activeName: "first",
      btnIndex: 1,//默认初始值请求今日数据
      form:{},
      tableData: [],
      tableData1: [],
      queryParams: {
        pageNum: 1,
        pageSize: 5,
      },
      total: 0,

    };
  },

点击切换事件currentFn(ind) ----分页列表事件getList

created() {
    this.currentFn(1);//请求默认今日数据
    this.getList()
  },
 getList(){
      // 列表分页数据
      listWenIndex(this.btnIndex,this.queryParams).then((res) => {
        this.tableData1 = res.rows
        this.total = res.total;
        console.log(res, "185");
      });
    },
// 切换按钮
    currentFn(ind) {
      console.log(ind, "index");
      this.btnIndex = ind;
      // 指标
      listYunIndex(ind).then((res) => {
        this.form = res.data;
      });
      // 渠道
      listIndex(ind).then((res) => {
        if(res.total<=5){
          this.tableData = res.rows;           
        }else{
          this.tableData = res.rows.slice(0,5);
        }
        console.log(res, "179");
  
      });
      
      // 调研
      // listWenIndex(ind,this.queryParams).then((res) => {
      //   this.tableData1 = res.rows
      //   this.total = res.total;
      //   console.log(res, "185");
      // });
    },

基本样式

.btn {
    float: right;
    width: 402px;
    height: 40px;
    // background-color: rgb(228, 28, 28);
    text-align: center;
    line-height: 40px;
    border: 1px solid #eaedf1;
    border-radius: 5px;
    box-sizing: border-box;
  }
  .btns {
    display: inline-block;
    width: 100px;
    height: 40px;
    border-right: 1px solid #eaedf1;
    box-sizing: border-box;
  }
  .btns:last-child {
    border-right: none;
  }
  .active {
    background-color: #e6f1fc;
    outline: none;
    border: 1px solid #cae4fe;
  }
  .btns:focus {
    // outline: 0;
  }

常用网络get请求方式

1、get

get请求方式将需要入参的数据作为 params 属性的值，最后整体作为参数传递。若没有请求参数，则可省略params属性。

 

 js get请求方式===?---params对象拼接参数    &---query方式拼接参数形式

// 分页数据
export function listWenIndex(timeCode,query) {
  return request({
    url: `/wx/index/selectResearchQuestionnaires/${timeCode}`,
    method: 'get',
    params: query
  })
}

A、字符串拼接方式

B、通过params属性传递对象

C、路径拼接方式

D、无请求参数