vue - 动态绑定 class

拈花ヽ惹草 提交于 2019-12-03 02:09:43
<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>
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!