Dynamic CSS (ok)

C:\xampp\htdocs\html\src\App.vue

<template>
  <ul>
    <li v-for="(task, index) in latest" :key="task.id" @click="finishTask(task)" :class="{ strikeout: task.finished }">
      {{ index + 1 }}. {{ task.name }}
      <span v-if="task.finished">
          <span style="color: red;">Delete task</span>
      </span>
    </li>
</ul>
</template>
<script>
export default {
  data() {
    return {
      title: 'My To Do App',
      newTask: '',
      tasks: [
        { id: 1, name: 'Learn Vue JS', finished: false },
        { id: 2, name: 'Build a Vue application', finished: true },
        { id: 3, name: 'Write an article about Vue JS', finished: false }
      ]
    }
  },
  methods: {
    addTask() {
      if (this.newTask.length < 1) return;
      this.tasks.push({
        id: this.tasks.length + 1,
        name: this.newTask,
        finished: false
      });
      this.newTask = '';
    },
    finishTask(task) {
      console.log(task);
    }
  },
  computed: {
    allTasks() {
      return this.tasks.length
    },
    latest() {
      return [...this.tasks].reverse()
    }
  }
}
</script>

<template>
  <ul>
    <li v-for="(task, index) in latest" :key="task.id" @click="finishTask(task)" :class="[ task.finished ? 'strikeout' : '', task.postponed ? 'text-gray' : '', 'simple-class' ]">
      {{ index + 1 }}. {{ task.name }}
      <span v-if="task.finished">
          <span style="color: red;">Delete task</span>
      </span>
    </li>
</ul>
</template>
<script>
export default {
  data() {
    return {
      title: 'My To Do App',
      newTask: '',
      tasks: [
        { id: 1, name: 'Learn Vue JS', finished: false },
        { id: 2, name: 'Build a Vue application', finished: true, postponed:true },
        { id: 3, name: 'Write an article about Vue JS', finished: false }
      ]
    }
  },
  methods: {
    addTask() {
      if (this.newTask.length < 1) return;
      this.tasks.push({
        id: this.tasks.length + 1,
        name: this.newTask,
        finished: false
      });
      this.newTask = '';
    },
    finishTask(task) {
      console.log(task);
    }
  },
  computed: {
    allTasks() {
      return this.tasks.length
    },
    latest() {
      return [...this.tasks].reverse()
    }
  }
}
</script>