Vue.js实现网格列表布局转换方法

<a class="list-icon" v-bind:class="{ 'active': layout == 'list'}" v-on:click="layout = 'list'"></a>
<a class="grid-icon" v-bind:class="{ 'active': layout == 'grid'}" v-on:click="layout = 'grid'"></a>
</div>

<!-- 现在有两种布局形式，选择哪种布局取决于 layout绑定 -->

<ul v-if="layout == 'grid'" class="grid">
<!-- 这种布局只显示缩略图片不显示文字 -->
<li v-for="a in articles">
<a v-bind:href="a.url" rel="external nofollow" rel="external nofollow" target="_blank"><img v-bind:src="a.image.large" /></a>
</li>
</ul>

<ul v-if="layout == 'list'" class="list">
<!-- 这种布局显示小图片和文字 -->
<li v-for="a in articles">
<a v-bind:href="a.url" rel="external nofollow" rel="external nofollow" target="_blank"><img v-bind:src="a.image.small" /></a>
<p>{{a.title}}</p>
</li>
</ul>

</form>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.5/vue.min.js"></script>
<script type="text/javascript">
var demo = new Vue({
el: '#main',
data: {
// 布局形式可能的值为grid或者list
layout: 'grid',

articles: [{
"title": "What You Need To Know About CSS Variables",
// "url":
"image": {
"large": "//files.jb51.net/file_images/article/201708/15-128.png",
"small": "//files.jb51.net/file_images/article/201708/15-128.png"
}
},
{
"title": "Freebie: 4 Great Looking Pricing Tables",
"image": {
"large": "//files.jb51.net/file_images/article/201708/15-128.png",
"small": "//files.jb51.net/file_images/article/201708/15-128.png"
}
},
{
"title": "20 Interesting JavaScript and CSS Libraries for February 2016",
"image": {
"large": "//files.jb51.net/file_images/article/201708/15-128.png",
"small": "//files.jb51.net/file_images/article/201708/15-128.png"
}
},
{
"title": "Quick Tip: The Easiest Way To Make Responsive Headers",
"image": {
"large": "//files.jb51.net/file_images/article/201708/15-128.png",
"small": "//files.jb51.net/file_images/article/201708/15-128.png"
}
},
{
"title": "Learn SQL In 20 Minutes",
"image": {
"large": "//files.jb51.net/file_images/article/201708/15-128.png",
"small": "//files.jb51.net/file_images/article/201708/15-128.png"
}
},
{
"title": "Creating Your First Desktop App With HTML, JS and Electron",
"image": {
"large": "//files.jb51.net/file_images/article/201708/15-128.png",
"small": "//files.jb51.net/file_images/article/201708/15-128.png"