$data

export default {
  data() {
    return {
      color: 'lightgreen'
    }
  },
  methods: {
    changeColor() {
      this.$data.color = 'pink';
    }
  }
}

Quyida ko‘proq misollarni ko‘ring.

Ta’rif va qo‘llanilishi

$data obyekti Vue nusxasining data qismida saqlangan barcha xususiyatlarni ifodalaydi.

Yuqoridagi misolda color xususiyatiga this.$data.color orqali murojaat qilingan, ammo xuddi shu xususiyatga shunchaki this.color deb yozib ham murojaat qilish mumkin va bu usul ko‘proq qo‘llaniladi.

$data obyekti Vue nusxasining data qismidagi xususiyatga murojaat qilayotganimizni aniq ko‘rsatish kerak bo‘lganda ishlatiladi.

Nomi "_" yoki "$" bilan boshlanadigan data xususiyatiga murojaat qilmoqchi bo‘lsak, $data obyektidan foydalanishimiz shart, chunki bunday hollarda birgina this prefiksi ishlamaydi.

Ko‘proq misollar

<div 
  v-on:click="$data.color+=100"
  v-bind:style="{backgroundColor:'hsl('+$data.color+',80%,80%)'}"
>
  <p>Click here</p>
</div>

Tegishli sahifalar

Vue darsligi: Vue v-on direktivasi

Vue darsligi: Vue v-bind direktivasi

Vue darsligi: Vue metodlari