vue v-for及对数据的 push 操作
<template>
<div class="hello">
<div class="top">这里是首页</div>
<button @click="addItem">增加</button>
<ul>
<li v-for="g in list">
<span>{{g.mm}}</span>**
<span>{{g.price}}</span>
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'hello',
data () {
return {
name: 'Welcome to Your App',
list: [
{mm: '路飞', price: 50},
{mm: '娜美', price: 20},
{mm: '乔巴', price: 5},
{mm: '索隆', price: 45}
]
}
},
methods: {
addItem () {
// 这里对数据进行操作
this.({mm: '白胡子', price: 80})
}
}
}</script>
<style scoped>h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
margin: 0 10px;
}
a {
color: #42b983;
}
.top {
margin: auto;
width: 200px;
height: 100px;
background: #f56868;
}</style>