TOP > これまでに書いた記事 > 【Vue.js】今日の支出合計が分かるアプリ

【Vue.js】今日の支出合計が分かるアプリ

はじめに

Vue.jsで、支出を記録して「記録」ボタンを押すと、今日の支出合計が自動計算されるアプリを作成してみました。

See the Pen Vue3 支出管理アプリ by Shibata Hiroki (@khiro-enginner) on CodePen.

使い方

例えば、コンビニで88円の水を買ったとすると、入力欄に88と入力して、「記録」ボタンを押します。そうすると、今日の支出合計が計算されて、表示されます。

金額を入力する
「記録」ボタンを押す

次に、スーパーで夕食の材料を買いに行き、合計777円使ったとします。同じ操作を行うと「今日の支出合計」が計算されて表示されていることが分かります。

金額を入力する
「記録」ボタンを押す

注意点

SPA(Single Page Application)なので、ブラウザをリロードしてしまうと、データが消えてしまいます。

ページ
最上部へ

目次へ