[Vue-Django] Vue directives 적용

JeongChaeJin·2022년 9월 7일
0

Vue-Django

목록 보기
12/14

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명과 일치해야되니 유의하자.
profile
OnePunchLotto

0개의 댓글