vue有赞项目详情页面知识点记录

一.axios获取数据，页面渲染。

  created() { 
    this.getDetails()
  },
  methods: {
    getDetails() {
      axios.get(url.details,{id}).then(res=>{
        this.details = res.data.data
      })
    },

details进行接收，然后渲染即可。类似于标题渲染details.title

二.tab光标切换

image.png
创建一个数组let detailsTab = ['商品详情','本店成交 ']

<button 
v-for="(item,index) in detailsTab" 
:class="{active:index===tabIndex}"
@click="changeTab(index)"
>{{item}} </button>

创建tabIndex接收数据，然后做判断，如果index和tabIndex相等就显示。

然后内容切换，用的是v-show, <div class="js-part " v-show="tabIndex===1" data-type="sales">， <div class="js-part js-goods-detail goods-tabber-c" v-show="tabIndex === 0" data-type="goods" v-html="details.description">

changeTab(index) {
      this.tabIndex = index
      if(index) {
        this.getDeal()
      }
    },
    getDeal() {
      axios.get(url.deal, {id}).then(res=>{
        this.dealLists = res.data.data.lists
      })
    }