Sertifikat olingYANGIW3Schools ilovasiiOS va AndroidSarguzashtni boshlang

Vue hisoblanadigan xususiyatlari (computed)

Hisoblangan xususiyatlar ma’lumotlar xususiyatlariga o‘xshaydi, faqat ular boshqa xususiyatlarga bog‘liq.

Hisoblangan xususiyatlar usullar kabi yoziladi, lekin ular hech qanday kiritish argumentlarini qabul qilmaydi.

Hisoblangan xususiyatlar bog‘liqlik o‘zgarganda avtomatik ravishda yangilanadi va biror narsa sodir bo‘lganda usullar chaqiriladi, masalan, hodisalarni (events) boshqarish kabi.

Hisoblangan xususiyatlar boshqa narsaga bog‘liq bo‘lgan narsani chiqarishda ishlatiladi.

ULASHISH

Hisoblangan xususiyatlar dinamikdir

Hisoblangan xususiyatning katta afzalligi shundaki, u dinamik bo‘lib, masalan, bir yoki bir nechta ma’lumotlar xususiyatlarining qiymatiga qarab o‘zgaradi.

Hisoblangan xususiyatlar biz o‘rganadigan Vue misolidagi uchinchi konfiguratsiya variantidir. Biz ko‘rib chiqqan dastlabki ikkita konfiguratsiya opsiyasi "ma’lumotlar" va "usullar" dir.

"Ma’lumotlar" va "usullar" kabi hisoblangan xususiyatlar ham Vue misolida zaxiralangan nomga ega: "hisoblangan".

Sintaksis

const app = Vue.createApp({
  data() {
    ...
  },
  computed: {
    ...
  },
  methods: {
    ...
  }
})

Hisoblangan xususiyat "ha" yoki "yo‘q"

Aytaylik, biz xaridlar ro‘yxatidagi elementlarni yaratish uchun shaklni xohlaymiz va biz yangi element muhim yoki muhim emasligini belgilashni xohlaymiz. Oldingi misolda qilganimizdek, katakcha belgilansa, biz "to‘g‘ri" yoki "noto‘g‘ri" fikr bildirishimiz mumkin:

Misol

Matn holatni aks ettirishi uchun kiritish elementi dinamik holga keltiriladi.

<input type="checkbox" v-model="chbxVal"> {{ chbxVal }}
data() {
  return {
    chbxVal: false
  }
}
O‘zingiz sinab ko‘ring »

Biroq, agar siz kimdandir biror narsa muhimmi deb so‘rasangiz, ular "to‘g‘ri" yoki "noto‘g‘ri" o‘rniga "ha" yoki "yo‘q" deb javob berishlari mumkin. Shunday qilib, shaklimizni oddiy tilga mosroq qilish uchun (intuitivroq) tasdiqlash katakchasida "to‘g‘ri" yoki "noto‘g‘ri" o‘rniga fikr-mulohaza sifatida "ha" yoki "yo‘q" bo‘lishi kerak.

Tasavvur qiling-a, hisoblangan xususiyat bu bizga yordam beradigan mukammal vositadir.

Misol

Hisoblangan "isImportant" xususiyati bilan biz endi belgilash katakchasi yoqilganda va o‘chirilganda foydalanuvchiga matnli fikr-mulohazalarni sozlashimiz mumkin.

<input type="checkbox" v-model="chbxVal"> {{ isImportant }}
data() {
  return {
    chbxVal: false
  }
},
computed: {
  isImportant() {
    if(this.chbxVal){
      return 'yes'
    }
    else {
      return 'no'
  }
}
O‘zingiz sinab ko‘ring »

Hisoblangan xususiyatlar va usullar

Hisoblangan xususiyatlar va usullar funksiyalar sifatida yoziladi, ammo ular boshqacha:

  • Methods HTML dan chaqirilganda ishlaydi, lekin bog‘liqlik o‘zgarganda hisoblangan xususiyatlar avtomatik ravishda yangilanadi.
  • Hisoblangan xususiyatlar ma’lumotlar xususiyatlaridan foydalanganimiz kabi ishlatiladi, lekin ular dinamikdir.

Vue mashqlari

O‘zingizni mashqlar bilan sinab ko‘ring

Mashq:

"isImportant" hisoblangan xususiyati ekranda ko‘rinishi uchun to‘g‘ri kodni kiriting.

<div id="app">
  <form>
    <p>
      Important item?
      <label>
         <input type="checkbox" v-model="chbxVal"> 
         
      </label>
    </p>
  </form>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  const app = Vue.createApp({
    data() {
      return {
        chbxVal: false
      }
    },
    : {
      isImportant() {
        if(this.chbxVal){
          return 'yes'
        }
        else {
          return 'no'
        }
      }
    }
  })
 app.mount('#app')
</script>

Mashqni boshlash


‹ OrqagaKeyingisi

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tishKirish