Хэрэглэгч талын хуудасны элементүүдийг удирдах бас нэгэн арга бол v-if директивийг ашиглах юм. Хуудас дахь элементүүдийг удирдах ажиллагааг хөнгөн эвтэйхэн хийдэг нь раектив фреймворкуудын нэг давуу тал бөгөөд хичээлээр v-if директивийн ажиллагааны онцлогийг
<body>
<div id="app">
<h1 v-if="isVisible">Гарчиг 1</h1>
<h2 v-else style="color: red">Гарчиг 2</h2>
<hr>
<button @click="isVisible = !isVisible">Сэлгэгч</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
isVisible: true
}
})
</script>
</body>кодоор авч үзье. Код хэрхэн ажиллахыг мэдэх тул тайлбар хэрэггүй.
Хөтөч дээр хуудсыг нээвэл Гарчиг 1 -ийг үзүүлэх ба Сэлгэгч товчийг дарвал Гарчиг 2 , Гарчиг 1 -ийг ээлжлэн үзүүлнэ. Гарчиг 1 -ийг харуулж байгаа хуудасны кодыг харвал
тэнд Гарчиг 2 -ийн h2 тэг байхгүй. Харин Сэлгэгч товчийг дарвал Гарчиг 2 -ийг үзүүлэх хуудасны кодод
Гарчиг 1 -ийн h1 тэг байхгүй болно. Эндээс v-if директив тухайн үед харуулах боломжгүй элементүүдийг DOM /Document Object Model/ -оос арилгадаг нь харагдана. Кодод v-if директивтэй маш төстэй ажилладаг v-show директивийг
<body>
<div id="app">
<h1 v-show="isVisible">Гарчиг 1</h1>
<h2 v-show="!isVisible" style="color: red">Гарчиг 2</h2>
<hr>
<button @click="isVisible = !isVisible">Сэлгэгч</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
isVisible: true
}
})
</script>
</body>ашиглаад хуудасны ажиллагааг шалгавал өмнөхтэй яг ижилхэн ажиллах ч хуудасны кодыг харвал
аль ч гарчигийг харуулж байхад DOM -д h1, h2 тэгтэй элементүүд байсаар байна. Гэхдээ тухайн үед харагдахгүй байгаа элементүүд dysplay: none хэвийг л авсан байгаа. Эндээс v-show директив v-if директивтэй адилхан ажилладаг хэдий ч харуулах боломжгүй элементүүдийг DOM -оос хасалгүй зөвхөн харагдахыг хаадаг онцлогтой. Иймээс v-show , v-if директивүүдийн ялгаатай ажиллагаа таны програмын бүтээмжид нөлөөлж болохыг бодолцох хэрэгтэй. Цаашид бид ямар үед аль директиийг ашиглах нь оновчтой гэдгийг судлана.
тэгшитгэлийн язгууруудын нийлбэрийг ол.
Зурагт үзүүлсэн хагас тойрогт 
бол AB -ийн уртыг ол.