入职学习之路——伪动态加载组件+Vue实现tab页

1.接口返回的数据格式为

data{
item1: "value1",
item2: "value2"
}

页面需要显示为在这里插入图片描述
多个这样的list,解决办法为
1)先将接口数据做一个映射:

// 键名映射
      matchObj: {
        firstClassify: '一级分类',
        secondClassify: '二级分类',
        thirdClassify: '三级分类',
        fourthClassify: '四级分类',
        fifthClassify: '五级分类'
      },
      // 接口数据
      matchData: [],

映射方法为

getMatchData () {
      this.listData = this.matchData.map((item) => ({
        [this.matchObj.firstClassify]: item.firstClassify,
        [this.matchObj.secondClassify]: item.secondClassify,
        [this.matchObj.thirdClassify]: item.thirdClassify,
        [this.matchObj.fourthClassify]: item.fourthClassify,
        [this.matchObj.fifthClassify]: item.fifthClassify
      }))

此时,根据UI有些属性需要显示为图片、下载等不同的类型,解决方法为

<ul class="page-content-list">
      <li class="page-content-list-item"
          v-for="(value,key) in listData[0]"
          :key="key">
        <div class="page-content-list-item-key">
          {{key}}
        </div>
        <div class="page-content-list-item-value">
          <div v-if="key === '所属供应渠道'">自营</div>
          <div v-if="key === '产品LOGO地址'">
            <logo :logo="matchData[0].logo"></logo>
          </div>
          <div v-if="key === 'logo预览'">
            <logoPreview :logo="matchData[0].logo"></logoPreview>
          </div>
          <div v-if="key === '产品说明书'">
            <manualBook :manualBook="matchData[0].manualBook"></manualBook>
          </div>
          <div v-if="key === '产品合同模板'">
            <agreement :agreement="matchData[0].agreement"></agreement>
          </div>
          <div v-if="key === '网站链接'">
            <url :url="matchData[0].url"></url>
          </div>
          <div v-if="key === '产品基本模式'">{{value|formatInfo({"1":"软件","2":"硬件","3":"API","4":"SAAS","5":"其他"})}}</div>
          <div v-else-if="key === '是否过风控'">{{value|formatInfo({"1":"是","0":"否"})}}</div>
          <div v-else-if="key === '产品所属生命周期'">{{value| formatInfo({"1":"成熟期","2":"发展规模化","3":"孵化开发期","4":"衰退期","5":"验证引入期"})}}</div>
          <div v-else-if="key === '面向客户'">{{matchData[0].customerScope}}</div>
          <div v-else>{{value}}</div>
        </div>
      </li>
    </ul>

注意,1)需要有v-else
2)父组件向子组件传值时,需要对应属性的属性名,不能修改
3)可以通过v-if来控制不同的属性,显示不同的内容,这个内容可以是引入的组件。
2、Vue实现tab页
在这里插入图片描述

<li>
                    <ul class="tab-list">
                        <li class="tab-list-button" v-for="item in stepList" :key="item.stepId"
                        @click="cur=item.stepId" :class="{active:cur==item.stepId}">
                            阶梯{{item.stepId}}
                            // 这里是下面的横线,横线也要跟着联动
                        <div class="tab-list-line" :class="{active:cur==item.stepId}"></div>
                        </li>
                    </ul>
 </li>
// 这里是每个tab页的内容,这里cur变量是从1开始的,所以要减1
			<li>
                  <ul>
                      <li class="pop-content-list-item" v-for="(value,key) in listData[cur-1]" :key="key">
                          <div class="pop-content-list-item-key">{{key}}</div>
                          <div class="pop-content-list-item-value"> {{value}}</div>
                      </li>
                  </ul>
              </li>
  data () {
    return {
      // tab默认值
      cur: 1 // 控制显示tab的序号
  },

关于active控制高亮的样式

   .active{
       color: #E5851A; // 控制字体显示成橘色
       .tab-list-line{
                  background: #E5851A; // 横线显示成橘色
             }
  }
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页