Vue.js 实例

ass="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" 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" target="_blank"><img v-bind:





src="a.image.small" /></a><p>{{a.title}}</p></li></ul></form><script>var demo = new Vue({el:





'





#main',data:





{// 视图模型，可能的值是 "grid" 或 "list"。layout:





'grid',articles:





[{"title":





"HTML 教程","url":





"https:





//www.k88.net/html/html-tutorial.html","image":





{"large":





"https:





//static.k88.net/images/mix/htmlbig.png","small":





"https:





//static.k88.net/images/icon/html.png"}},{"title":





"CSS 教程","url":





"https:





//www.k88.net/css/css-tutorial.html","image":





{"large":





"https:





//static.k88.net/images/mix/cssbig.png","small":





"https:





//static.k88.net/images/icon/css.png"}},{"title":





"JS 教程","url":





"https:





//www.k88.net/js/js-tutorial.html","image":





{"large":





"https:





//static.k88.net/images/mix/jsbig.jpeg","small":





"https:





//static.k88.net/images/icon/js.png"}},{"title":





"SQL 教程","url":





"https:





//www.k88.net/sql/sql-tutorial.html","image":





{"large":





"https:





//static.k88.net/images/mix/sqlbig.png","small":





"https:





//static.k88.net/images/icon/sql.png"}},{"title":





"Ajax 教程","url":





"https:





//www.k88.net/ajax/ajax-tutorial.html","image":





{"large":





"https:





//static.k88.net/images/mix/ajaxbig.png","small":





"https:





//static.k88.net/images/icon/ajax.png"}},{"title":





"Python 教程","url":





"https:





//www.k88.net/pyhton/pyhton-tutorial.html","image":





{"large":





"https:





//static.k88.net/images/mix/pythonbig.png","small":





"https:





//static.k88.net/images/icon/python.png"}}]}});</script>尝试一下 ?