}
}
});
切换不同布局实例
切换不同布局
点击右上角的按钮来切换不同页面布局：
![]()
![]()
{{a.title}}
var demo = new Vue({
el: '#main',
data: {
// 视图模型，可能的值是 "grid" 或 "list"。
layout: 'grid',
articles: [{
"title": "HTML 教程",
"url": "https://www.mscto.com/html/html-tutorial.html",
"image": {
"large": "https://www.easck.com/d/file/200612/20200612204534807.jpg",
"small": "https://www.easck.com/d/file/200612/20200612204504737.jpg"
}
},
{
"title": "CSS 教程",
"url": "https://www.mscto.com/css/css-tutorial.html",
"image": {
"large": "https://www.easck.com/d/file/200612/20200612204544837.jpg",
"small": "https://www.easck.com/d/file/200612/20200612204454712.jpg"
}
},
{
"title": "JS 教程",
"url": "https://www.mscto.com/js/js-tutorial.html",
"image": {
"large": "https://www.easck.com/d/file/200612/20200612204554869.jpg",
"small": "https://www.easck.com/d/file/200612/20200612204604901.jpg"
}
},
{
"title": "SQL 教程",
"url": "https://www.mscto.com/sql/sql-tutorial.html",
"image": {
"large": "https://www.easck.com/d/file/200612/20200612204614922.jpg",
"small": "https://www.easck.com/d/file/200612/20200612204524787.jpg"
}
},
{
"title": "Ajax 教程",
"url": "https://www.mscto.com/ajax/ajax-tutorial.html",
"image": {
"large": "https://www.easck.com/d/file/200612/20200612204624952.jpg",
"small": "https://www.easck.com/d/file/200612/20200612204634970.jpg"
}
},
{
"title": "Python 教程",
"url": "https://www.mscto.com/pyhton/pyhton-tutorial.html",
"image": {
"large": "https://www.easck.com/d/file/200612/20200612204644998.jpg",
"small": "https://www.easck.com/d/file/200612/202006122046541020.jpg"
}
}]
}
});
