> 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/conditional-rendering.md).

# Conditional Rendering  (ok)

### v-if

![](https://2312674349-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MeXbfPqPP3ZSJVavefR%2F-MiDEU8MF0harB1cFzE1%2F-MiDFFn5kN6UxpcoO0tu%2FScreenshot_2.png?alt=media\&token=efb43258-68cc-4290-8471-d3b0afa840f5)

```
<template>
  <ul>
    <h1>{{ title }}</h1>
    <li v-for="task in tasks" :key="task.id">
        {{ task.id }}. {{ 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',
      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 }
      ]
    }
  }
}
</script>
```

![](https://2312674349-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MeXbfPqPP3ZSJVavefR%2F-MiDEU8MF0harB1cFzE1%2F-MiDG2NohErfX8xIVYA0%2FScreenshot_3.png?alt=media\&token=978a94d9-7f07-4bc1-bafe-cd06c4e96630)

```
<template>
  <ul>
    <h1>{{ title }}</h1>
    <li v-for="task in tasks" :key="task.id">
        {{ task.id }}. {{ task.name }}
        <span v-if="task.finished">
            <span style="color: red;">Delete task</span>
        </span>
        <span v-else-if="task.edit">
            <span style="color: red;">Edit task</span>
        </span>
        <span v-else="task.edit">
            <span style="color: red;">Edit task</span>
        </span>
    </li>
  </ul>
</template>
<script>
export default {
  data() {
    return {
      title: 'My To Do App',
      tasks: [
        { id: 1, name: 'Learn Vue JS', finished: false, edit: false, else: false},
        { id: 2, name: 'Build a Vue application', finished: true, edit: false, else: true },
        { id: 3, name: 'Write an article about Vue JS', finished: false, edit: true, else: false }
      ]
    }
  }
}
</script>
```