v-bind

Misol

<div> elementining fon rangini o‘zgartirish uchun v-bind direktivasidan foydalanish.

<template>
  <h2>Example v-bind Directive</h2>
  <p>The v-bind directive connects the style attribute of the DIV element to the 'colorVal' data property.</p>
  <div v-bind:style="{ backgroundColor: colorVal }">DIV element</div>
  <p>Use the input type="color" box below to change the color.</p>
  <p><input type="color" v-model="colorVal"> <pre>colorVal: '{{ colorVal }}'</pre></p>
</template>

Misolni ishga tushirish »

Quyida ko‘proq misollarni ko‘ring.

Ta’rif va qo‘llanilishi

v-bind direktivasi HTML atributini Vue nusxasidagi xususiyatga bog‘lash (yuqoridagi misol) yoki props uzatish (quyidagi 1-misol) uchun ishlatiladi.

Agar Vue nusxasining xususiyatini o‘zgartirsak va bu xususiyat v-bind orqali HTML atributiga bog‘langan bo‘lsa, Vue reaktivlik tizimi tufayli HTML element avtomatik ravishda yangi atribut qiymati bilan yangilanadi.

"v-bind:" ning qisqa shakli shunchaki ":", .prop modifikatori bilan ishlatilganda esa ".".

Ushbu modifikatorlar v-bind direktivasi bilan ishlatilishi mumkin, lekin ko‘pincha kerak emas:

Modifikator	Tafsilotlar
`.camel`	Atribut nomini kebab-case’dan camelCase’ga o‘zgartiradi. Build bosqichidan yoki string shablonlardan foydalanilganda bu kerak emas.
`.prop`	Bog‘lanishni DOM xususiyati sifatida o‘rnatishga majbur qiladi. Maxsus (custom) elementlar bilan ishlanmayotgan bo‘lsa, Vue v-bind bilan berilgan kalit elementning DOM xususiyatimi yoki atributimi ekanini o‘zi aniqlaydi va kalitni mos ravishda bog‘laydi.
`.attr`	Bog‘lanishni DOM atributi sifatida o‘rnatishga majbur qiladi. Maxsus (custom) elementlar bilan ishlanmayotgan bo‘lsa, Vue v-bind bilan berilgan kalit elementning DOM xususiyatimi yoki atributimi ekanini o‘zi aniqlaydi va kalitni mos ravishda bog‘laydi.

Ko‘proq misollar

1-misol

Boolean (true/false) ma’lumot turidagi "img" prop’ini yuborish uchun v-bind’dan foydalanish.

<template>
  <h2>Example v-bind Directive</h2>
  <p>Two props are sent to the component. We must use v-bind for the prop with 'boolean' data type.</p>
  <button v-on:click="this.img = !this.img">Toggle 'img' prop value</button> {{ img }}
  <info-box 
    turtle-text="Turtles can hold their breath for a long time."
    v-bind:turtle-img="img"
  />
</template>

<script>
export default {
  data() {
    return {
      img: true
    }
  }
}
</script>

Misolni ishga tushirish »

2-misol

"v-bind:" ning qisqa shakli ":" dan foydalanish.

<template>
  <h2>Example v-bind Directive</h2>
  <p>Two props are sent to the component. We must use v-bind for the prop with 'boolean' data type.</p>
  <button v-on:click="this.img = !this.img">Toggle 'img' prop value</button> {{ img }}
  <info-box 
    turtle-text="Turtles can hold their breath for a long time."
    :turtle-img="img"
  />
</template>

<script>
export default {
  data() {
    return {
      img: true
    }
  }
}
</script>

Misolni ishga tushirish »

3-misol

Belgilash katakchasining (checkbox) indeterminate DOM xususiyatini o‘zgartirish uchun .prop modifikatoridan foydalanish.

<template>
  <p>Using the '.prop' modifier to toggle the 'indeterminate' appearance of the checkbox:</p>
  <button v-on:click="indetVal = !indetVal">Toggle</button>
  <p>
    <input type="checkbox" v-bind:indeterminate.prop="indetVal"> Checkbox
  </p>
</template>

<script>
export default {
  data() {
    return {
      indetVal: false
    };
  }
};
</script>

<style>
input {
  margin: 20px;
  scale: 2;
}
</style>

Misolni ishga tushirish »

4-misol

.prop modifikatorining qisqa shakli va v-bind qisqa shaklidan foydalanish, natijada "v-bind:indeterminate.prop" ".indeterminate" ga aylanadi.

<template>
  <p>Using the '.prop' shorthand so that 'v-bind:indeterminate.prop' becomes '.indeterminate':</p>
  <button v-on:click="indetVal = !indetVal">Toggle</button>
  <p>
    <input type="checkbox" .indeterminate="indetVal"> Checkbox
  </p>
</template>

<script>
export default {
  data() {
    return {
      indetVal: false
    };
  }
};
</script>

<style scoped>
input {
  margin: 10px;
  scale: 2;
}
</style>

Misolni ishga tushirish »

Tegishli sahifalar

Vue darsligi: Vue CSS bog‘lash

Vue darsligi: Vue v-bind direktivasi

Vue darsligi: Vue props

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tish Kirish