VUE - 동적 바인딩 클래스

<템플릿>

  <DIV 클래스 = "할 일 항목"  : 클래스 = "{ '이다 완성'todo.completed}" >

      <p>

          <input 타입 = "체크 박스"@ 변경 = "markComplete">

          {{todo.title}}

      </ p>

  </ DIV>

</ 서식>

<script>

수출 기본 {

    이름 : '할 일',

    소품 : "해야할 일"],

    행동 양식:{

        markComplete () {

             this.todo.completed =! this.todo.completed

            CONSOLE.LOG (this.todo);

        }

    }

}

</ script>

<스타일 범위>

.ALL 항목 {

    배경 : # f4f4f4;

    패딩 : 10px;

    국경 바닥 : 1 픽셀의 점선 #ccc;

}

.is는 완성 {

    텍스트 장식 : 라인을 통해

}

.of {

    배경 : #의 FF0000;

    색상 : #fff;

    국경 : 없음;

    패딩 : 5px 9px;

    경계 반경 : 50 %;

    커서 : 포인터;

    플로트 : 오른쪽;

}

</ 스타일>