实现效果：

实现代码及注释：

<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">

<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">

{{a.title}}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.5/vue.min.js"&gt;
<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": "https://files.jb51.cc/file_images/article/201708/15-128.png","small": "https://files.jb51.cc/file_images/article/201708/15-128.png"
}
},{
"title": "Freebie: 4 Great Looking Pricing Tables","image": {
"large": "https://files.jb51.cc/file_images/article/201708/15-128.png",{
"title": "20 Interesting JavaScript and CSS Libraries for February 2016",{
"title": "Quick Tip: The Easiest Way To Make Responsive Headers",{
"title": "Learn sql In 20 Minutes",{
"title": "Creating Your First Desktop App With HTML,JS and Electron","small": "https://files.jb51.cc/file_images/article/201708/15-128.png"
}
}]
}
});