VUE - 動的バインディングクラス

<テンプレート>

  <DIV CLASS = "TODO項目"  ：クラス= "{ '完全である'：todo.completed}" >

      <P>

          <input type = "チェックボックスが" @に変更= "markComplete">

          {{}} todo.title

      </ P>

  </ div>

</テンプレート>

<スクリプト>

輸出のデフォルト{

    名前： 'TODO'、

    小道具：[ "TODO"]、

    方法：{

        markComplete（）{

             this.todo.completed =！this.todo.completed

            console.log（this.todo）。

        }

    }

}

</ SCRIPT>

<スタイルは、スコープ>

.ALL項目{

    背景：＃f4f4f4;

    パディング：10pxの;

    border-bottom：1pxの破線の#CCC。

}

.is完全{

    テキスト装飾：ライン・スルー

}

.of {

    背景：＃FF0000の。

    色：#FFF;

    国境：なし;

    パディング：5pxの9px;

    境界半径：50％。

    カーソル：ポインタ;

    フロート：右;

}

</スタイル>