Bagaimana untuk mendapatkan nilai textarea dalam uniapp

Apabila menggunakan komponen textarea dalam uniapp, kita perlu mendapatkan teks yang dimasukkan oleh pengguna dalam komponen tersebut. Jadi bagaimana untuk mendapatkan nilai textarea? Seterusnya, mari kita jawab secara terperinci.

1. Penggunaan asas textarea

Pertama sekali, kita perlu memahami penggunaan asas komponen textarea. Dalam uniapp, menggunakan komponen textarea perlu diperkenalkan dalam templat Kod sampel adalah seperti berikut:

<template>
  <view>
    <textarea 
      style="height: 200rpx;" 
      value="{{textValue}}" 
      @input="inputHandle"
    ></textarea>
  </view>
</template>

Dalam kod di atas, kami mengikat pembolehubah textValue melalui nilai dan kaedah inputHandle melalui acara input. Antaranya, gaya menetapkan ketinggian komponen textarea.

2. Dapatkan nilai textarea melalui pengikatan dua hala

Dalam kod di atas, kami mengikat nilai textarea kepada pembolehubah textValue melalui pengikatan dua hala. Apabila pengguna memasukkan kandungan dalam kawasan teks, nilai pembolehubah textValue juga akan berubah. Pada ketika ini, kita boleh mendapatkan nilai textarea melalui pembolehubah textValue. Kod sampel adalah seperti berikut:

<template>
  <view>
    <textarea 
      style="height: 200rpx;" 
      v-model="textValue" 
      @input="inputHandle"
    ></textarea>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        textValue: '' // 绑定值
      }
    },
    methods: {
      inputHandle(e) {
        console.log(e.detail.value) // 获取输入的值
      }
    }
  }
</script>

Dalam kod di atas, kami mengikat pembolehubah textValue melalui arahan v-model Apabila pengguna memasukkan kandungan dalam textarea, nilai pembolehubah textValue juga akan berubah. Melalui acara @input, kami mendapat nilai input dalam kaedah inputHandle, dan kami boleh mendapatkan nilai kawasan teks.

3. Dapatkan nilai textarea melalui atribut ref

Selain pengikatan dua hala, kita juga boleh mendapatkan nilai textarea melalui atribut ref. Tetapkan atribut ref pada komponen textarea, kemudian dapatkan contoh komponen melalui ini.$refs dalam kod, dan akhirnya dapatkan nilai textarea melalui atribut nilai contoh. Kod sampel adalah seperti berikut:

<template>
  <view>
    <textarea 
      style="height: 200rpx;" 
      ref="myTextarea" 
      @input="inputHandle"
    ></textarea>
    <button @click="getValue">获取值</button>
  </view>
</template>

<script>
  export default {
    methods: {
      inputHandle(e) {
        console.log(e.detail.value)
      },
      getValue() {
        const myTextarea = this.$refs.myTextarea // 获取组件实例
        console.log(myTextarea.value) // 获取输入的值
      }
    }
  }
</script>

Dalam kod di atas, kami memberikan nama myTextarea kepada komponen textarea melalui atribut ref. Dalam kaedah getValue, dapatkan contoh komponen myTextarea melalui ini.$refs, dan akhirnya dapatkan nilai input melalui atribut nilai contoh untuk mendapatkan nilai textarea.

Ringkasan

Melalui pengenalan di atas, kita dapat melihat bahawa mendapatkan nilai textarea adalah sangat mudah. Dalam uniapp, kita boleh mendapatkan nilai textarea melalui pengikatan dua hala atau melalui atribut ref. Tidak kira kaedah yang anda pilih, anda boleh memanipulasi komponen textarea dengan mudah untuk memasukkan teks ke dalamnya. Semoga artikel ini bermanfaat kepada semua.

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