Vue.jsでwebアプリを作ろう#04
Todo リストのレイアウトをつくる
前回まで、入力フィールドに入れた値をタイトル部分に表示させるプログラムを作りました。
今回から入力フィールドに入れた値をTodoリストに加えていくプログラムを書いていきます。
まず見出しとリスト、入力フィールドを用意していきます。
<body class="container mt-4">
<div id="app" class="row">
<div class="col-md-8 offset-md-2">
<h2>Todo</h2>
<ul class="list-unstyled">
<li class="form-check">
<label>
<input type="checkbox" class="form-check-input">
<span>{{todo}}</span>
</label>
</li>
</ul>
<p>
<input type="text" v-model="todo" class="form-control">
</p>
</div>
</div>
<script></script>
<!-- 省略 -->
<script src="js/main.js"></script>
</body>前回のフォーマットを引き継いで、
タイトルとulのリストタグを挿入しています。
ulにbootstrapのクラスにある.list-unstyledというクラスをつけて、
リストの・を消してます。
チェックボックスも欲しいので
<input type="checkbox"> で追加してます。
こちらも class="form-control"等でスタイリングしてます。
前回説明したv-modelで
入力欄にいれるとtodoリストの内容が記入される仕組みをつくっていきます。
今回からjsの記述が多くなっていくので外部ファイルから読み込むようにしています。vue.jsの導入時に追加したcdnのリンクの下に外部ファイルのjsフォルダの中のmain.jsファイルを読み込んでます。
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script type="text/javascript" src="js/main.js"></script>
※Javascript main.jsの内容
element要素にid #appを指定して
dataのプロパティ要素にtodoを追加しております。
テキストの中身は空欄にしております。
inputで読み込んだテキストを
双方向にバインディングして
<span>{{todo}}</span>
こちらに表示される仕組みになっています。
var app = new Vue({
el: '#app',
data: {
todo: ''
}
});
次にチェックボックスを入力すると
終わったという打ち消し線を追加するようにしましょう。
まず class="done" を用意して
<span class="done">{{todo}}</span>
に追加します。
スタイルシートのファイル(css/style.css)を用意して
bootstrapのCDNリンクの下にリンク要素を追加します。
<link rel="stylesheet" href="css/style.css">
こちらにスタイルを記述します。
以下style.cssの内容
.done{
text-decoration: line-through;
color: gray;
}打ち消し線のtext-decorationを追加して、カラーをグレーにしてます。
こちらのclass="done"を
チェックボックスをつかってバインディングできるようにします。
<span v-bind:class="{'done': true}">{{todo}}</span>先程つけたclassの前に
vue.jsでクラスをコントロールできるように
v-bind: をつけてdoneクラスをオブジェクトとして扱います。
{'done':true}
波括弧と'で囲い、
判定するためのtrueのプロパティをいれています。
この【'done': true】 の trueとfalseを
チェックボックスで判定して出し入れしていきます。
今回は以上です。
次回はチェックボックスでv-bind要素をコントロールしていきます。
<div id="app" class="row">
<div class="col-md-8 offset-md-2">
<h2>Todo</h2>
<ul class="list-unstyled">
<li class="form-check">
<label>
<input type="checkbox" class="form-check-input">
<span v-bind:class="{'done': true}">{{todo}}</span>
</label>
</li>
</ul>
<p>
<input type="text" v-model="todo" class="form-control">
</p>
</div>
</div>Twitterではブログに書いていないこともつぶやいているので、ぜひフォローしてください。
https://twitter.com/HAMA3san
ストリートアカデミーで毎月講座を開催中。
https://www.street-academy.com/steachers/198346
webデザイナーもくもく制作サロンへの招待について
https://note.mu/hamasan918/n/ne4d98f9db9ec
もくもく制作サロンを開講しました。
サロンでは勉強会を開催して質問を受け付けています。
月額500円となります。
この記事が気に入ったらサポートをしてみませんか？