Bagaimana untuk mendapatkan nilai dalam vue

Vue ialah rangka kerja pembangunan web popular yang menyediakan gula sintaksis untuk pengikatan dua hala. Dalam Vue, kami boleh mendapatkan data pada halaman dengan mudah dan membalas perubahannya dalam masa nyata. Artikel ini akan meneroka cara mendapatkan nilai dalam Vue.

Terdapat dua cara utama untuk mendapatkan nilai dalam Vue, satu adalah menggunakan arahan dan satu lagi adalah menggunakan sifat yang dikira.

Gunakan arahan untuk mendapatkan nilai

Vue menyediakan beberapa arahan untuk mendapatkan nilai input, pilih dan jenis lain dengan mudah pada halaman.

Arahan v-model

Arahan v-model ialah arahan yang paling biasa digunakan untuk mendapatkan nilai dalam Vue Ia boleh digunakan untuk mengikat nilai elemen borang dan mengemas kini data secara automatik apabila pengguna memasukkan . Sebagai contoh, dalam kod berikut, kami menggunakan arahan model v untuk mengikat nilai kotak input kepada atribut mesej dalam objek data:

<div id="app">
  <input v-model="message">
  <p>{{ message }}</p>
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: ''
  }
})

Sekarang, apabila anda menaip masuk kotak input Apabila teks dimasukkan, Vue akan mengemas kini secara automatik nilai atribut mesej dalam data di latar belakang dan memaparkannya dalam tag p pada masa yang sama.

arahan v-bind

Arahan v-bind boleh digunakan untuk mengikat satu atau lebih sifat secara dinamik dalam templat. Sebagai contoh, dalam kod berikut, kami menggunakan v-bind untuk mengikat atribut href bagi teg a kepada atribut url dalam objek data:

<div id="app">
  <a v-bind:href="url">Vue.js</a>
</div>

var app = new Vue({
  el: '#app',
  data: {
    url: 'https://vuejs.org/'
  }
})

arahan v-on

v-on boleh digunakan untuk mengikat acara. Sebagai contoh, dalam kod berikut, kami menggunakan v-on untuk mengikat peristiwa klik pada teg butang Apabila butang diklik, Vue akan secara automatik memanggil kaedah kenaikan dalam objek data:

<div id="app">
  <button v-on:click="increment">{{ count }}</button>
</div>

.

var app = new Vue({
  el: '#app',
  data: {
    count: 0
  },
  methods: {
    increment: function () {
      this.count++
    }
  }
})

Gunakan sifat yang dikira untuk mendapatkan nilai

Dalam Vue, kita juga boleh menggunakan sifat yang dikira untuk mendapatkan nilai. Harta yang dikira ialah sifat dengan mekanisme caching yang nilainya berdasarkan pengiraan data lain. Ia dikira semula secara automatik apabila data yang bergantung padanya berubah.

Penggunaan asas sifat yang dikira

Sebagai contoh, dalam kod berikut, kami mengisytiharkan sifat yang dikira bernama reversedMessage, yang nilainya ialah rentetan songsang bagi sifat mesej dalam Pemindahan objek data:

<div id="app">
  <input v-model="message">
  <p>{{ reversedMessage }}</p>
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  computed: {
    reversedMessage: function () {
      return this.message.split('').reverse().join('')
    }
  }
})

Dapatkan dan tetapkan kaedah atribut yang dikira

Selain mentakrifkan nilai atribut yang dikira melalui kaedah get, kita juga boleh menentukan pengiraan melalui kaedah set Nilai atribut itu. Sebagai contoh, dalam kod di bawah, kami mengisytiharkan harta terkira yang dipanggil fullName yang nilainya ialah gabungan sifat firstName dan lastName dalam objek data. Apabila kami mengubah suai nilai fullName, Vue akan secara automatik memanggil kaedah yang ditetapkan untuk mengemas kini sifat firstName dan lastName dalam objek data pada masa yang sama:

<div id="app">
  <input v-model="firstName">
  <input v-model="lastName">
  <p>{{ fullName }}</p>
</div>

var app = new Vue({
  el: '#app',
  data: {
    firstName: 'John',
    lastName: 'Doe'
  },
  computed: {
    fullName: {
      get: function () {
        return this.firstName + ' ' + this.lastName
      },
      set: function (newValue) {
        var names = newValue.split(' ')
        this.firstName = names[0]
        this.lastName = names[names.length - 1]
      }
    }
  }
})

Ringkasan

Dalam Vue, Kita boleh menggunakan v-model, v-bind, v-on dan arahan lain untuk mendapatkan data pada halaman, dan kita juga boleh menggunakan sifat yang dikira untuk mengira data untuk menjana nilai baharu. Melalui kaedah ini, Vue menyediakan cara yang sangat mudah untuk mendapatkan data, membolehkan kami bertindak balas dengan mudah kepada pelbagai keperluan perniagaan.

Atas ialah kandungan terperinci Bagaimana untuk mendapatkan nilai dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!