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')