uniapp에서 텍스트 영역의 값을 얻는 방법

uniapp에서 textarea 컴포넌트를 사용할 때, 컴포넌트에 사용자가 입력한 텍스트를 가져와야 합니다. 그렇다면 텍스트 영역의 값을 얻는 방법은 무엇입니까? 다음으로 자세히 답변해 보겠습니다.

1. textarea의 기본 사용법

우선 textarea 컴포넌트의 기본 사용법을 이해해야 합니다. uniapp에서는 textarea 컴포넌트를 템플릿에 도입해야 합니다. 샘플 코드는 다음과 같습니다.

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

위 코드에서는 value를 통해 textValue 변수를, input 이벤트를 통해 inputHandle 메서드를 바인딩했습니다. 그 중 스타일은 텍스트 영역 구성 요소의 높이를 설정합니다.

2. 양방향 바인딩을 통해 textarea 값 가져오기

위 코드에서는 양방향 바인딩을 통해 textarea 값을 textValue 변수에 바인딩합니다. 사용자가 텍스트 영역에 내용을 입력하면 textValue 변수의 값도 변경됩니다. 이 시점에서 textValue 변수를 통해 textarea의 값을 얻을 수 있습니다. 샘플 코드는 다음과 같습니다.

<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>

위 코드에서는 v-model 지시문을 통해 textValue 변수를 바인딩합니다. 사용자가 텍스트 영역에 콘텐츠를 입력하면 textValue 변수의 값도 변경됩니다. @input 이벤트를 통해 inputHandle 메소드에서 입력 값을 가져오고, 텍스트 영역의 값도 가져올 수 있습니다.

3. ref 속성을 통해 텍스트 영역 값을 얻습니다.

양방향 바인딩 외에도 ref 속성을 통해 텍스트 영역 값을 얻을 수도 있습니다. textarea 컴포넌트에 ref 속성을 설정한 후, 코드의 this.$refs를 통해 컴포넌트의 인스턴스를 가져오고, 마지막으로 인스턴스의 value 속성을 통해 textarea의 값을 가져옵니다. 샘플 코드는 다음과 같습니다.

<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>

위 코드에서는 ref 속성을 통해 textarea 구성 요소에 myTextarea라는 이름을 할당했습니다. getValue 메소드에서는 this.$refs를 통해 myTextarea 컴포넌트의 인스턴스를 획득하고, 마지막으로 인스턴스의 value 속성을 통해 입력값을 획득하여 textarea의 값을 획득합니다.

Summary

위의 소개를 통해 textarea의 값을 얻는 것이 매우 간단하다는 것을 알 수 있습니다. uniapp에서는 양방향 바인딩이나 ref 속성을 통해 textarea 값을 얻을 수 있습니다. 어떤 방법을 선택하든 텍스트 영역 구성 요소를 쉽게 조작하여 텍스트를 입력할 수 있습니다. 이 기사가 모든 사람에게 도움이 되기를 바랍니다.

위 내용은 uniapp에서 텍스트 영역의 값을 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!