Conditionals and Loops

It’s easy to toggle the presence of an element, too:

<view>
<text v-if="seen">Now you see me</text>
</view>
<script>
export default {
data: function() {
return {
seen: false
};
}
};
</script>

This example demonstrates that we can bind data, and dynamically manipulate the UI elements.

There are quite a few other directives, each with its own special functionality. For example, the v-for directive can be used for displaying a list of items using the data from an Array:

<view class="container">
<text class="text-container" v-for="todo in todos" :key="todo.text">
{{ todo.text }}
</text>
</view>
<script>
export default {
data: function() {
return {
todos: [
{ text: "Learn JavaScript" },
{ text: "Learn Vue" },
{ text: "Build something awesome" }
]
};
}
};
</script>
<style>
.container {
background-color: white;
align-items: center;
justify-content: center;
flex: 1;
}
.text-container {
color: blue;
padding: 2;
}
</style>