> For the complete documentation index, see [llms.txt](https://learnmagento.gitbook.io/vuejs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://learnmagento.gitbook.io/vuejs/dynamic-css-ok.md).

# Dynamic CSS (ok)

![](https://2312674349-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MeXbfPqPP3ZSJVavefR%2F-MiDK-Tf6DdKWjieYuG5%2F-MiDM5cZp3XZKOQZsTOW%2FScreenshot_8.png?alt=media\&token=7be4f623-a778-4946-bf61-13fb129412b5)

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>
```

![](https://2312674349-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MeXbfPqPP3ZSJVavefR%2F-MiDK-Tf6DdKWjieYuG5%2F-MiDM_5mriMt5448VED2%2FScreenshot_9.png?alt=media\&token=592869a1-dcc7-4192-b003-ad0bd2052693)

```
<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>
```