本文最后更新于 745 天前，其中的信息可能已经有所发展或是发生改变。
介绍
解题思路
考验Vue2基本功，我们可以用v-if指令实现表格和列表的切换，同时使用v-for指令渲染出Axios获取到的数据，使用v-bind指令来控制CSS类的开启关闭：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>布局切换</title>
<script type="text/javascript" src="./js/vue.js"></script>
<link rel="stylesheet" type="text/css" href="./css/index.css" />
<script src="./js/axios.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app" v-cloak>
<!-- TODO：请在下面实现需求 -->
<div class="bar">
<a :class="mode==='grid'?'grid-icon active':'grid-icon'" @click="mode='grid'"></a>
<a :class="mode==='list'?'list-icon active':'list-icon'" @click="mode='list'"></a>
</div>
<!--grid 示例代码，动态渲染时可删除-->
<ul class="grid" v-if="mode==='grid'">
<li v-for="(item,idx) in goodsList" :key="idx">
<a :href="item.url" target="_blank"> <img :src="item.image.large" /></a>
</li>
</ul>
<ul class="list" v-if="mode==='list'">
<li v-for="(item,idx) in goodsList" :key="idx">
<a :href="item.url" target="_blank"> <img :src="item.image.small" /></a>
<p>{{ item.title }}</p>
</li>
</ul>
</div>
</body>
</html>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
goodsList: [],
mode: 'grid'
},
mounted() {
// TODO：补全代码实现需求
var that = this;
window.axios.get('/goodsList.json').then(data => {
that.goodsList = data.data
})
},
});
</script>
