代码及注释：

<!-- 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 => { ...})