VueでToDoリストを作る - 坂本研のゼミ室

Vue.jsの一歩としてToDoリストを作ってみました。

下準備する
HTML部分
Vueインスタンス
完成
最後に

下準備する

今回は、CDNを使っています。(2019/07/01)

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>

HTML部分

setTodayで日付を表示

v-forでtodos配列から一つずつオブジェクトを取得していく

チェックボックスはv-model="todo.done"につなぐ

ToDoの文字列はtodo.textで表示する

v-bind:class="{donestyle:todo.done}"で打ち消し線スタイル

input要素でToDoを入力させる

追加、削除のボタンを用意

remainingで済ませたToDoの件数を表示

<h1>ToDoリスト</h1>
<div id="app">
    <p>{{setToday}}</p>
    <div v-for="todo in todos">
        <label>
            <input type="checkbox" v-model="todo.done">
            <span v-bind:class="{donestyle:todo.done}">{{todo.text}}</span>
        </label>
    </div>

    <input type="text" v-model.trim="addtext" placeholder="ToDo入力">
    <button v-on:click="addToDo">追加</button>
    <p><button v-on:click="cleanToDo">処理済みを削除</button></p>
    <p>{{ remaining }} 件済ませたよ！
</div>

Vueインスタンス

<script>
    new Vue({
        el: '#app',
        data: {
            addtext:'',
            todos: [],
        },
        computed: {
            remaining: function() {
                return this.todos.filter(function(val) {
                    return val.done == true;
                }).length;
            },
        
            setToday: function() {
            var hiduke=new Date();
            var year = hiduke.getFullYear();
            var month = hiduke.getMonth()+1;
            var week = hiduke.getDay();
            var day = hiduke.getDate();
            return this.transfer_data = year + '/' + month + '/' + day;
            }


        },
        methods: {
            addToDo: function() {
                if (this.addtext) {
                    this.todos.push({done:false, text:this.addtext});
                    this.addtext = '';
                }
            },
            cleanToDo: function() {
                this.todos = this.todos.filter(function(val) {
                    return val.done == false;
                })
            }
        }
    })
</script>