Cara menggunakan v-model untuk mengikat singkatan unsur bentuk dalam Vue

Singkatan untuk cara menggunakan v-model untuk mengikat elemen bentuk dalam Vue

Vue ialah rangka kerja JavaScript popular yang boleh membina aplikasi interaktif dengan cepat. Vue menyediakan banyak arahan praktikal, salah satu yang paling biasa digunakan ialah "v-model".

Arahan "v-model" boleh digunakan untuk mengikat elemen bentuk dengan sifat data dalam tika Vue. Arahan "v-model" boleh mengemas kini atribut data secara automatik apabila pengguna menukar input borang, dan apabila atribut data berubah, input borang juga akan dikemas kini secara automatik.

Walau bagaimanapun, dalam aplikasi praktikal, arahan "v-model" kadangkala kelihatan rumit dan panjang. Jadi Vue menyediakan beberapa singkatan untuk arahan "v-model" untuk menjadikannya lebih mudah semasa menulis kod.

Di bawah ini kami akan memperkenalkan cara menggunakan singkatan arahan "v-model" dalam Vue.

1. Singkatan kotak teks
Arahan "v-model" kotak teks boleh disingkatkan dengan "v-model="msg"". Antaranya, msg ialah nama atribut data dalam contoh Vue.

Contohnya:

<template>
  <div>
    <input v-model="msg" placeholder="请输入文本">
    <p>{{ msg }}</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        msg: ''
      }
    }
  }
</script>

disingkatkan sebagai:

<template>
  <div>
    <input :value="msg" @input="msg=$event.target.value" placeholder="请输入文本">
    <p>{{ msg }}</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        msg: ''
      }
    }
  }
</script>

2. Singkatan kotak berbilang pilihan
Perintah "v-model" bagi pilihan berbilang kotak boleh digunakan ":checked" ="checkedValue"" dan "@change="onCheckedChange"" untuk dipendekkan.

Contohnya:

<template>
  <div>
    <input type="checkbox" v-model="checkedValue">
    <p>{{ checkedValue }}</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        checkedValue: ''
      }
    }
  }
</script>

disingkatkan kepada:

<template>
  <div>
    <input type="checkbox" :checked="checkedValue" @change="onCheckedChange">
    <p>{{ checkedValue }}</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        checkedValue: ''
      }
    },
    methods: {
      onCheckedChange(event) {
        this.checkedValue = event.target.checked;
      }
    }
  }
</script>

3. Singkatan butang radio
Perintah "v-model" butang radio boleh digunakan ":checked ="checkedValue"" dan "@change="onCheckedChange"" untuk dipendekkan.

Contohnya:

<template>
  <div>
    <input type="radio" v-model="checkedValue" value="1">
    <input type="radio" v-model="checkedValue" value="2">
    <p>{{ checkedValue }}</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        checkedValue: ''
      }
    }
  }
</script>

disingkatkan kepada:

<template>
  <div>
    <input type="radio" :checked="checkedValue === '1'" @change="onCheckedChange('1')">
    <input type="radio" :checked="checkedValue === '2'" @change="onCheckedChange('2')">
    <p>{{ checkedValue }}</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        checkedValue: ''
      }
    },
    methods: {
      onCheckedChange(value) {
        this.checkedValue = value;
      }
    }
  }
</script>

Ringkasnya, singkatan arahan "v-model" dalam Vue menjadikan kod lebih ringkas dan lebih mudah untuk membaca, tetapi Beri perhatian kepada penggunaan singkatan yang betul. Dalam perkembangan sebenar, anda boleh memilih untuk menggunakan kaedah singkatan yang sesuai mengikut keperluan anda sendiri.

Atas ialah kandungan terperinci Cara menggunakan v-model untuk mengikat singkatan unsur bentuk dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!