Bagaimana untuk melaksanakan borang pengikatan dua hala dalam Vue-View.js-php.cn

Bagaimana untuk melaksanakan borang pengikatan dua hala dalam Vue

王林

Lepaskan： 2023-10-15 11:31:46

asal

1218 orang telah melayarinya

Bagaimana untuk melaksanakan borang pengikatan dua hala dalam Vue

Vue ialah rangka kerja JavaScript yang popular untuk membina antara muka pengguna interaktif. Ia menyediakan mekanisme pengikatan dua hala untuk memastikan data disegerakkan dengan UI. Dalam Vue, pengikatan dua hala unsur bentuk boleh dicapai melalui arahan model-v. Artikel ini akan memperkenalkan secara terperinci cara melaksanakan bentuk pengikatan dua hala dalam Vue dan menyediakan beberapa contoh kod khusus.

Pertama, kita perlu memperkenalkan perpustakaan Vue.js ke dalam fail HTML. Ia boleh diimport melalui CDN atau fail tempatan.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue双向绑定</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <input type="text" v-model="message">
    <p>{{ message }}</p>
  </div>
  <script src="index.js"></script>
</body>
</html>

Salin selepas log masuk

Seterusnya, buat contoh Vue dalam fail JavaScript dan tentukan pembolehubah mesej menggunakan atribut data.

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

Salin selepas log masuk

Dalam contoh ini, kami menggunakan arahan model v untuk mengikat kotak input dan pembolehubah mesej. Pembolehubah mesej akan dikemas kini secara automatik apabila pengguna memasukkan teks dalam kotak input dan begitu juga sebaliknya. Sintaks pendakap kerinting berganda {{ mesej }} digunakan dalam teg p untuk memaparkan nilai pembolehubah mesej.

Selain kotak input teks, Vue juga boleh melaksanakan pengikatan dua hala unsur bentuk lain, seperti kotak berbilang pilihan, butang radio dan senarai lungsur. Berikut ialah beberapa contoh kod khusus.

Kotak berbilang pilihan:

<div id="app">
  <input type="checkbox" v-model="isChecked">
  <p>{{ isChecked }}</p>
</div>

Salin selepas log masuk

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

Salin selepas log masuk

Butang radio:

<div id="app">
  <input type="radio" value="option1" v-model="selectedOption">
  <input type="radio" value="option2" v-model="selectedOption">
  <p>{{ selectedOption }}</p>
</div>

Salin selepas log masuk

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

Salin selepas log masuk

Senarai lungsur:

<div id="app">
  <select v-model="selectedOption">
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option value="option3">Option 3</option>
  </select>
  <p>{{ selectedOption }}</p>
</div>

Salin selepas log masuk

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

Salin selepas log masuk

Melalui contoh di atas, kita dapat melihat cara melaksanakan pengikatan dua hala borang dalam Vue. Melalui arahan model v, kami boleh mengikat elemen borang dengan mudah kepada data untuk mencapai kemas kini data masa nyata. Mekanisme pengikatan dua hala ini sangat memudahkan proses pembangunan dan meningkatkan kecekapan pembangunan.

Selain elemen bentuk, Vue juga menyokong pengikatan dua hala jenis elemen lain, seperti kawasan teks dan komponen kompleks. Dalam projek sebenar, mengikut keperluan sebenar, kami boleh menggunakan teknik ini secara fleksibel untuk mencapai kesan interaksi UI yang lebih kompleks.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan borang pengikatan dua hala dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!