← Vue.js learning pathVue.js · Module 4 of 10
Directives: v-if, v-for, v-model
Control rendering and two-way binding with built-in directives.
📖 Key ideas
- v-if / v-else-if / v-else add or remove elements.
- v-show toggles CSS display only.
- v-for="item in items" :key="item.id" renders lists.
- v-model binds form inputs both ways.
- Avoid v-if and v-for on the same element.
💡 Real-life example: v-model is a mirror: type in the input and the data changes; change the data and the input changes.
v-ifConditionally renders an element
v-showToggles visibility with CSS
v-forRenders a list
v-modelTwo-way input binding