Vue
HTML
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css">
<div id="app">
<section class="blogs has-padding-bottom-xxl">
<div class="container">
<div class="columns" v-for="(blogs, key) in blogsArr" :key="key">
<div class="column" v-for="(blog, index) in blogs" :key="index">
{{ blog.title }}
</div>
</div>
</div>
</section>
</div>
CSS
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
#app {
background: #fff;
border-radius: 4px;
padding: 20px;
transition: all 0.2s;
}
li {
margin: 8px 0;
}
h2 {
font-weight: bold;
margin-bottom: 15px;
}
del {
color: rgba(0, 0, 0, 0.3);
}
Vue
new Vue({
el: "#app",
data: {
blogsArr: [
[{ title: "Learn JavaScript" },
{ title: "Learn Vue" }],
[{ title: "Play around in JSFiddle" },
{ title: "Build something awesome" }]
]
}
})