HTML

{% block content %}
<div id='app'>

    <h1>My Todo App !</h1>
    <strong>서로 할 일이나 의견을 공유해 봅시다.</strong>
    <br>

    <div class="inputBox">
        <input class="name" type="text" placeholder="name ..." v-model.trim="name">
        <input class="item" type="text" placeholder="type anything welcomed ..."
            v-model.trim="todo" v-on:keyup.enter="add_todo()">
        <button v-on:click="add_todo()" class="btn btn-primary btn-sm">ADD</button>
    </div>

    <ul class="todoList">
        <li v-for="(todo, index) in todoList">
            <span>[[ todo.name ]]:: [[ todo.todo ]]</span>
            <span class="removeBtn" v-on:click="remove_todo(todo, index)">x</span>
        </li>
    </ul>

</div>
{% endblock %}

• 본문
• v-model direcitve로 data를 binding 할 수 있는데, trim을 통해 미리 전처리를 해서 가져올 수 있다.
  • Django Model의 Field명과 일치해야되니 유의하자.