Conditionals and Loops
Conditional Rendering
To render a widget or container only under certain conditions, you can use the
v-if directive:1
<template>
2
<Window title="Example" width="400" height="100" margined>
3
<Box padded>
4
<Text>Welcome to your Vuido application!</Text>
5
<Text v-if="seen">You can see this</Text>
6
</Box>
7
</Window>
8
</template>
9
​
10
<script>
11
export default {
12
data() {
13
return {
14
seen: true
15
};
16
}
17
}
18
</script>
Copied!
In this example, both Text widgets are displayed because the condition evaluates to true. When the value of the
seen property is changed to false, the second Text widget is removed from the window.You can use
v-else-if and v-else directives to create conditions with multiple alternatives:1
<Button v-if="mode == 'button'">This is a button</Button>
2
<Checkbox v-else-if="mode == 'checkbox'">This is a checkbox</Checkbox>
3
<Text v-else>This is something else</Text>
Copied!
Note that conditional directives destroy and create the widgets whenever the condition changes. To temporarily hide a widget without destroying it, you can use the visible attribute.
List Rendering
To render multiple instances of the same component, you can use the
v-for directive:1
<template>
2
<Window title="Example" width="400" height="100" margined>
3
<Box padded>
4
<Text v-for="item in items">- {{ item }}</Text>
5
</Box>
6
</Window>
7
</template>
8
​
9
<script>
10
export default {
11
data() {
12
return {
13
items: [ 'apples', 'oranges', 'bananas' ]
14
};
15
}
16
}
17
</script>
Copied!
In this example, three Text widgets are rendered, one for each element of the
items array. When an item is added or removed from this array, corresponding Text widgets are automatically added or removed.It's recommended to provide a unique
key attribute for each item. This way, the state of widgets will be preserved when array items are reordered.Last modified 3yr ago
Copy link