web蓝桥杯真题：布局切换

代码及注释：

<!-- TODO：请在下面实现需求 -->
<div class="bar">    //动态添加类名
  <a class="grid-icon" :class="changeBar == 0 ? 'active' : ''" @click="changeBar = 0"></a>
  <a class="list-icon" :class="changeBar == 1 ? 'active' : ''" @click="changeBar = 1"></a>
</div>
<!--grid 示例代码，动态渲染时可删除-->
<ul class="grid" v-if="changeBar == 0">    //判断显示大图效果还是列表效果
  <li v-for="item in goodsList">    //循环展示
    <a :href="item.url" target="_blank"> <img :src="item.image.large" /></a>
  </li>
</ul>
<ul class="list" v-else>
  <li v-for="item in goodsList">
    <a :href="item.url" target="_blank"> <img :src="item.image.small" /></a>
    <p>{{item.title}}</p>
  </li>
</ul>

var vm = new Vue({
  el: "#app",
  data: {
    changeBar: 0,   //0大图效果，1列表效果
    goodsList: [],
  },
  mounted() {
    // TODO：补全代码实现需求
    axios.get('./goodsList.json').then(res => this.goodsList = res.data)
  },
});

知识点：

1.动态添加类名

<div :class="表达式" ></div>

2.控制显示

v-if="条件"     v-else

3.请求数据

axios.get('url').then(res => { ...})