<template id="main">
<v-ons-page>
<v-ons-toolbar>
<div class="center">Card</div>
<div class="right"><button @click="addToList()">click</button></div>
</v-ons-toolbar>
<div v-for="item in items">
<v-ons-card>
<img src="https://monaca.io/img/logos/download_image_onsenui_01.png" alt="Onsen UI" style="width: 100%">
<div class="title">
Awesome framework
</div>
<div class="content">
<div>
<v-ons-button><v-ons-icon icon="ion-thumbsup"></v-ons-icon></v-ons-button>
<v-ons-button><v-ons-icon icon="ion-share"></v-ons-icon></v-ons-button>
</div>
<v-ons-list>
<v-ons-list-header>Bindings</v-ons-list-header>
<v-ons-list-item>Vue</v-ons-list-item>
<v-ons-list-item>Angular</v-ons-list-item>
<v-ons-list-item>React</v-ons-list-item>
</v-ons-list>
</div>
</v-ons-card>
</div>
</v-ons-page>
</template>
<div id="app"></div>
<script>
new Vue({
data: {
items: ['item1', 'item2']
},
el: '#app',
template: '#main',
methods: {
addToList: function() {
this.items.push('item3');
}
}
});
</script>
onsenui@2.9.3