Cara uniapp melaksanakan pengikatan data kotak input

Dengan perkembangan pesat aplikasi mudah alih, pembangunan aplikasi merentas platform telah menjadi pilihan yang semakin popular, terutamanya rangka kerja pembangunan merentas platform uni-apl, yang membolehkan pembangun membangun sekali menggunakan sintaks Vue dan kemudian menerbitkannya kepada berbilang platform, termasuk iOS, Android, H5, program mini, dsb. Dalam uni-app, bagaimana untuk melaksanakan pengikatan data kotak input? Seterusnya, mari kita lihat.

1. Arahan model-v

Dalam Vue, kita boleh menggunakan arahan model-v untuk melaksanakan pengikatan data dua hala antara kotak input dan sifat dalam objek Data ini juga boleh digunakan pada rangka kerja uni -app.

Kaedah menggunakan arahan model-v adalah sangat mudah Anda hanya perlu menambah arahan model-v pada teg <input> atau <textarea> dan nyatakan atribut objek Data terikat. Contohnya:

<template>
  <view>
    <input type="text" v-model="inputValue"/>
    <view>输入的值为：{{inputValue}}</view>
  </view>
</template>

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

Dalam contoh di atas, kami menambah arahan v-model="inputValue" pada tag <input> untuk mengikat kotak input kepada inputValue supaya input input kotak Nilai akan dikemas kini secara automatik kepada atribut inputValue. Pada masa yang sama, gunakan sintaks interpolasi {{inputValue}} pada halaman untuk memaparkan nilai kotak input.

2. @input event

Selain arahan v-model, kami juga boleh menggunakan acara @input untuk mengikat data kotak input.

Dalam rangka kerja uni-app, anda boleh menggunakan acara @input untuk memantau perubahan dalam nilai input kotak input dan menyegerakkan nilai yang diubah kepada sifat dalam objek Data, contohnya:

<template>
  <view>
    <input type="text" :value="inputValue" @input="handleInput"/>
    <view>输入的值为：{{inputValue}}</view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        inputValue: ''
      }
    },
    methods: {
      handleInput(e) {
        this.inputValue = e.target.value
      }
    }
  }
</script>

Dalam contoh di atas, kami mentakrifkan atribut nilai pada teg <input>, mengikatnya pada atribut inputValue objek Data dan menggunakan acara @input untuk memantau perubahan dalam input nilai kotak input. Dan selaraskan nilai yang diubah kepada atribut handleInput dalam kaedah inputValue. Begitu juga, gunakan sintaks interpolasi {{inputValue}} pada halaman untuk memaparkan nilai kotak input.

3 atribut jam tangan

Selain arahan model v dan acara @input, kami juga boleh menggunakan atribut jam tangan contoh komponen untuk mendengar perubahan dalam atribut dalam objek Data dan lakukan sesuatu apabila perubahan berlaku Ambil tindakan sewajarnya.

Dalam rangka kerja uni-app, anda boleh menggunakan atribut jam tangan untuk memantau perubahan atribut objek Data, contohnya:

<template>
  <view>
    <input type="text" :value="inputValue"/>
    <view>输入的值为：{{inputValue}}</view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        inputValue: ''
      }
    },
    watch: {
      inputValue(newValue) {
        console.log('输入框的值变为：' + newValue)
      }
    }
  }
</script>

Dalam contoh di atas, kami menentukan atribut jam tangan untuk memantau Data Apabila nilai atribut inputValue dalam objek berubah, konsol akan mengeluarkan maklumat yang sepadan.

Ringkasan

Dalam rangka kerja uni-apl, kami boleh menggunakan pelbagai kaedah untuk melaksanakan pengikatan data dua hala bagi kotak input, termasuk arahan model v, acara @input dan atribut jam tangan . Kaedah yang berbeza sesuai untuk senario yang berbeza, dan pembangun boleh memilih kaedah yang paling sesuai mengikut keperluan mereka sendiri.

Atas ialah kandungan terperinci Cara uniapp melaksanakan pengikatan data kotak input. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!