Webアプリ制作　(5)vue.jsを触ってみた

融合系女子えみりー 🍔
2019/07/31 05:20

今週はjavascriptのフレームワークvue.jsについて調べ、簡単なプログラムを書きました。

商品名などを入力し、登録ボタンを押すと、下の表の部分に追加されるようにしました。

⬇︎コード⬇️

<html>

<label for="category">商品カテゴリー:</label>
<select id="category" v-model="category">
<option selected>その他</option>
<option>お惣菜🍙</option>
<option>パン🍞</option>
<option>生鮮食品🍅</option>
<option>お菓子🍭</option>
<option>日配食品🐄</option>
</select><br>

<label for="discount">割引率:</label>
<select id="discount" v-model="discount">
<option selected>定価</option>
<option>10%OFF</option>
<option>20%OFF</option>
<option>30%OFF</option>
<option>50%OFF</option>
<option>セール価格</option>
</select><br>

<table>
<tr>
<th style="width: 300px">商品名</th>
<th style="width: 100px">商品カテゴリー</th>
<th style="width: 50px">廃棄期限</th>
<th style="width: 50px">価格</th>
<th style="width: 50px">割引率</th>
<th style="width: 50px">販売場所</th>

</tr>
<tr v-for="(item, idx) in list" :style="item.style" :key="item.id">
<td>{{item.name}}</td>
<td>{{item.category}}</td>
<td>{{item.deadline}}</td>
<td>{{item.price}}</td>
<td>{{item.discount}}</td>
<td>{{item.place}}</td>

</tr>
</table>

</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
list: [],
name: '',
category: '',
deadline: '',
price: '',
discount: '',
place: ''

},
methods: {
submit: function() {
this.list.push({
name: this.name,
category: this.category,
deadline: this.deadline,
price: this.price,
discount: this.discount,
place: this.place,
});
}

}
});

</script>

</body>

以上です。