Vue 인스턴스
<script src="https://unpkg.com/vue@3.2.30/dist/vue.global.js"></script>
<script src="https://unpkg.com/vue-router@4.0.12/dist/vue-router.global.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
<div id="root">
<p>test</p>
<input type="text" v-model="add_name" placeholder="name" />
<button @click="add">add</button>
<ul>
<li v-for="(item, i) in list">
{{ item.id }} : {{ item.name }}
</li>
</ul>
</div>
new Vue({
el: '#root',
data() {
return {
list: [
{ id: 1, name: "test1" },
{ id: 2, name: "test2" }
],
add_name: ""
};
},
methods: {
add() {
if (this.add_name) {
const newItem = {
id: this.list.length + 1,
name: this.add_name
};
this.list.push(newItem);
this.add_name = "";
}
}
}
});
