vue - 动态绑定 class

<template>

  <div class="todo-item" :class="{'is-complete':todo.completed}">

      <p>

          <input type="checkbox" @change="markComplete">

          {{todo.title}}

      </p>

  </div>

</template>

<script>

export default {

    name:'todo',

    props:["todo"],

    methods:{

        markComplete(){

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

            console.log(this.todo);

        }

    }

}

</script>

<style scoped>

.todo-item{

    background: #f4f4f4;

    padding: 10px;

    border-bottom: 1px dotted #ccc ;

}

.is-complete{

    text-decoration: line-through

}

.del{

    background: #ff0000;

    color: #fff;

    border: none;

    padding: 5px 9px;

    border-radius: 50%;

    cursor: pointer;

    float: right;

}

</style>