vue.js
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<meta charset="UTF-8">
</head>
<body>
<div id="app">
<input type="text" v-model="text1">
<input type="button" @click="add()" value="追加">
<div>{{ itemCount }}</div>
<table border="1" v-if="items.length > 0">
<tr v-for="(item, i) in items">
<td>{{ item }}</td>
<td><input type="button" @click="del(i)" value="削除"></td>
<td><input type="button" @click="update(i)" value="更新"></td>
</tr>
</table>
</div>
</body>
</html>
<script>
const app = new Vue({
el: '#app',
data: {
text1: '',
items: []
},
mounted() {
this.text1 = 'test';
},
methods: {
add() {
this.items.push(this.text1);
},
del(i) {
app.items.splice(i, 1);
},
update(i) {
Vue.set(app.items, i, this.text1);
}
},
computed: {
itemCount() {
return this.items.length + '個';
}
}
})
</script>