提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

vue - 动态绑定 class

Vue 动态 绑定 Class
2023-09-14 08:57:23 时间
<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>

相关文章