<template>

Misol

HTML kodining bir qismini v-if direktivasi yordamida ko‘rsatish yoki yashirish uchun o‘rnatilgan <template> elementidan foydalanish.

<ul>
  <li>Trolltunga</li>
  <template v-if="display">
    <li>Potato Point</li>
    <li>The souks of Marrakech</li>
    <li>Dry Tortugas</li>
    <li>Halong Bay</li>
  </template>
  <li>...</li>
</ul>

Misolni ishga tushirish »

Ta’rif va qo‘llanilishi

HTML <template> tegi v-if, v-else-if, v-else, v-for yoki v-slot Vue direktivalari bilan ishlatilganda o‘rnatilgan Vue <template> elementiga aylanadi.

v-if, v-else-if, v-else yoki v-for bilan ishlatilganda o‘rnatilgan <template> elementi HTML kodining bir qismini render qiladi.

v-slot bilan ishlatilganda o‘rnatilgan <template> elementi HTML kodining bir qismini belgilangan slotga yo‘naltiradi. Quyidagi 1-misolga qarang.

O‘rnatilgan <template> elementining o‘zi DOM elementi sifatida render qilinmaydi.

Eslatma: SFC (*.vue) fayllaridan foydalanilganda yuqori darajadagi <template> elementi tuzilma talabiga ko‘ra majburiy hisoblanadi. Bunday yuqori darajadagi <template> elementlari uchun Vue direktivalaridan foydalanib bo‘lmaydi.

Ko‘proq misollar

1-misol

Bir nechta elementni o‘rab olish (inkapsulyatsiya qilish) va ularni v-slot direktivasi yordamida muayyan nomli slotga yuborish uchun o‘rnatilgan <template> elementidan foydalanish.

<template>
  <h1>App.vue</h1>
  <p>The component has two div tags with one slot in each.</p>
  <slot-comp>
    <template v-slot:bottomSlot>
      <h4>To the bottom slot!</h4>
      <p>This p tag and the h4 tag above are directed to the bottom slot with the v-slot directive used on the template tag.</p>
    </template>
    <p>This goes into the default slot</p>
  </slot-comp>
</template>

Misolni ishga tushirish »

2-misol

<template> elementidan foydalanib, v-if direktivasi bilan bir nechta elementni render qilish mumkin.

<div id="app">
<template v-if="text.includes('pizza')">
<p>The text includes the word 'pizza'</p>
<img src="img_pizza.svg">
</template>
<p v-else>The word 'pizza' is not found in the text</p>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
text: 'I like taco, pizza, Thai beef salad, pho soup and tagine.'
}
}
})
app.mount('#app')
</script>

O‘zingiz sinab ko‘ring »

Tegishli sahifalar

Vue darsligi: Vue v-slot

Vue darsligi: Vue shablonlari

Vue darsligi: Vue v-if direktivasi

Vue ma’lumotnomasi: Vue v-if direktivasi

Vue ma’lumotnomasi: Vue v-slot direktivasi

HTML ma’lumotnomasi: HTML <template> tegi teg

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tish Kirish