TOC
wwworkshop
Uni Köln

3.7.3
Loops and conditions in Vue.js

Conditions use v-if. The condition is written as the content of the attribute.

Loops use v-for attribute, which contains the <element> in <list> notation (the <list> can be defined as data property in the Vue app).

index.html

<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Titel</title>
</head>
<body>
    <div id="app">
 
        <p v-for="number in numbers">
            {{ number }}
            <span v-if="number % 2 === 0">even</span>
            <span v-else>odd</span>
        </p>
 
    </div>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="script.js"></script>
</body>
</html>

script.js

const { createApp, ref } = Vue

createApp({
    data () {
        return {
 
            numbers: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
 
        }
    }
}).mount('#app')