27.90 ALIS 
2.20 ALIS 
ログイン 
- 融合系女子 えみりー 🍔
- 2019/07/31 05:20
今週はjavascriptのフレームワークvue.jsについて調べ、簡単なプログラムを書きました。
商品名などを入力し、登録ボタンを押すと、下の表の部分に追加されるようにしました。
⬇︎コード⬇️
<html>
<body>
<!-- HTML -->
<div id="app">
<p>
<label>商品名:
<input style="width: 300px" type="text" v-model="name">
</label><br>
<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>廃棄期限:
<input type="date" v-model="deadline">
</label><br>
<label>価格:
<input type="text" v-model="price">
</label><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>
<label>販売場所
<input type="text" v-model="place">
</label><br>
<button @click="submit()">登録</button>
</p>
<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>
<!-- JavaScript -->
<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>
以上です。
0人がサポートしています
獲得ALIS: 
8.62 ALIS 0.00 ALIS
8.62 ALIS 0.00 ALIS
- 融合系女子 えみりー 🍔
- @emily3
投稿者の人気記事
27.90 ALIS 2.20 ALIS 23.64 ALIS 0.00 ALIS 
19.12 ALIS 1.00 ALIS 
コメントする
Loading...
コメントする
こちらもおすすめ！
NFT解体新書・デジタルデータをNFTで販売するときのすべて【実証実験・共有レポート】
otakucoin 2021/03/29
681.47 ALIS
121.79 ALIS
海外企業と契約するフリーランス広報になった経緯をセルフインタビューで明かす！
Semapho 2021/09/14
246.34 ALIS
16.10 ALIS
梅雨の京都八瀬・瑠璃光院はしっとり濃い新緑の世界
こすもす 2021/05/25
460.46 ALIS
216.64 ALIS
わら人形を釘で打ち呪う 丑の刻参りは今も存在するのか？ 京都最恐の貴船神社奥宮を調べた
こすもす 2021/08/07
599.04 ALIS
486.35 ALIS
機械学習を体験してみよう！（難易度低）
nonstop-iida 2020/03/04
454.56 ALIS
124.82 ALIS
約２年間ブロックチェ－ンゲームをして
kaya 2021/10/06
1.10k ALIS
61.20 ALIS
警察官が一人で戦ったらどのくらいの強さなの？『柔道編』 【元警察官が本音で回答】
ふたひい＠web3 2020/05/16
827.50 ALIS
114.82 ALIS
【初心者向け】Splinterlandsの遊び方【BCG】
暗号資産ジョシ校生 蟻巣 2021/07/07
514.28 ALIS
6.32 ALIS
SASUKEオーディションに出た時の話
Taka 2021/01/22
494.64 ALIS
35.87 ALIS
テレビ番組で登録商標が「言えない」のか考察してみる
連獅子 2021/10/09
417.76 ALIS
31.20 ALIS
ジョークコインとして出発したDogecoin（ドージコイン）の誕生から現在まで。注目される非証券性🐶
昆布森ちゃん 2021/01/19
1.44k ALIS
38.31 ALIS
無料案内所という職業
bansu 2019/06/11
596.41 ALIS
84.20 ALIS
