Vue에서 입력 상자의 숨겨진 기능을 구현하는 방법

웹 애플리케이션이 개발됨에 따라 더 많은 비즈니스 시나리오에서 사용자가 데이터를 입력해야 하며, 사용자 입력 상자는 이러한 목표를 달성하는 데 필요한 구성 요소 중 하나입니다. 그러나 경우에 따라서는 입력창을 숨겨야 하는 경우도 있습니다. 물론 이는 입력창을 완전히 숨기는 것이 아니라, 입력한 비밀번호 등 입력창의 일부를 숨기는 것입니다. Vue에서 입력 상자를 숨기는 것은 매우 간단합니다. 이 기사에서는 구현 세부 사항을 이해하도록 안내합니다.

먼저 Vue가 무엇인지 이해해야 합니다. Vue는 사용자 인터페이스 구축을 위한 진보적인 프레임워크입니다. Vue는 다른 라이브러리나 기존 프로젝트와 쉽게 통합될 수 있으며, 사용자가 다양한 UI 상호작용을 쉽게 완료할 수 있는 매우 간단한 API도 제공합니다.

다음으로 Vue 인스턴스, 구성 요소, 소품, 이벤트 및 계산된 속성과 같은 Vue의 몇 가지 중요한 개념을 이해해야 합니다.

• Vue 인스턴스: Vue의 핵심 개념으로, 새로운 Vue로 생성된 객체입니다. Vue 인스턴스의 모든 속성과 메서드는 인스턴스를 통해 액세스할 수 있으며, Vue의 다양한 동작도 Vue 인스턴스의 수명 주기 메서드를 통해 제어할 수 있습니다.
• 컴포넌트: 코드를 더 작고 구성하기 쉬운 부분으로 나누는 데 도움이 되는 Vue의 독립 모듈입니다. 따라서 컴포넌트는 Vue의 매우 핵심 개념입니다.
• Props: Vue 구성 요소의 속성 개체로, 구성 요소에 데이터를 전달하는 데 사용됩니다. Props는 단방향 데이터 흐름입니다. 즉, 상위 구성 요소는 하위 구성 요소에 데이터를 전달할 수 있지만 하위 구성 요소는 props의 값을 직접 수정할 수 없습니다.
• 이벤트: DOM 이벤트를 모니터링하고 응답하는 데 사용할 수 있습니다. Vue는 다양한 이벤트를 처리하기 위한 몇 가지 내장 이벤트 수정자를 제공합니다.
• 계산된 속성: 다른 변수의 값을 기반으로 속성을 계산하는 데 사용됩니다. 계산된 속성은 Vue에서 중요한 개념이며 구성 요소 내의 속성 계산 및 동적 계산에 자주 사용됩니다.

이러한 개념을 이해한 후에는 입력 상자 숨기기 기능 구현을 시작할 수 있습니다. 먼저 새 Vue 인스턴스를 만들고 textInput 구성 요소를 추가해야 합니다. 이 구성 요소에는 입력 상자를 숨길지 여부를 제어하는 ​​소품이 필요합니다. 다음은 이 구성 요소의 코드입니다.

// textInput.vue
<template>
  <div>
    <input 
      type="text" 
      :value="inputValue"
      @input="handleInput"
      v-if="!hidden"
    />
    <input 
      type="password" 
      :value="inputValue"
      @input="handleInput"
      v-if="hidden"
    />
  </div>
</template>

<script>
  export default {
    name: 'textInput',
    props: {
      hidden: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        inputValue: ''
      }
    },
    methods: {
      handleInput(e) {
        this.inputValue = e.target.value
        this.$emit('input', e.target.value)
      }
    }
  }
</script>

이 구성 요소에서는 두 개의 입력 상자를 정의합니다. 하나는 일반 텍스트 입력 상자이고 다른 하나는 비밀번호 입력 상자입니다. 둘 사이의 유일한 차이점은 유형 속성입니다. 두 입력 상자 모두 입력 값을 저장하는 데 사용되는 inputValue 변수에 바인딩됩니다. 동시에 사용자가 입력 상자에 입력하면 inputValue 변수의 값이 업데이트되고 입력 이벤트가 트리거됩니다.

컴포넌트에서는 v-if 지시문을 사용하여 입력 상자를 숨길지 여부를 제어합니다. Hidden이 False이면 일반 텍스트 입력 상자가 표시되고, Hidden이 True이면 비밀번호 입력 상자가 표시됩니다. 여기서는 숨겨진 속성을 구성 요소에 전달하기 위해 Prop도 사용됩니다.

다음으로 Vue 인스턴스에서 이 구성 요소를 사용하고 사용자 정의 입력 변수를 통해 숨김을 제어해야 합니다. 구현 코드는 다음과 같습니다.

// App.vue
<template>
  <div>
    <textInput 
      v-model="input" 
      :hidden="hideInput"
    />
    <button @click="toggleHideness">
      {{ hideInput ? 'Show' : 'Hide' }} input
    </button>
  </div>
</template>

<script>
  import textInput from './components/textInput.vue'

  export default {
    name: 'app',
    data() {
      return {
        input: '',
        hideInput: false
      }
    },
    components: {
      textInput
    },
    methods: {
      toggleHideness() {
        this.hideInput = !this.hideInput
      }
    }
  }
</script>

이 Vue 인스턴스에서는 위에서 작성한 구성 요소를 도입하고 input과 hideInput이라는 두 가지 변수를 정의했습니다. 그 중 input 변수는 입력 상자에 값을 저장하는 데 사용되고, hideInput 변수는 입력 상자 숨기기를 제어하는 ​​데 사용됩니다.

템플릿에서 구성 요소를 렌더링하고 hideInput 변수를 매개 변수로 전달하여 입력 상자 숨김 여부를 제어합니다. 또한 입력 상자에 비밀번호를 사용할지 여부를 전환하기 위해 hideInput 변수의 값을 전환하는 버튼을 추가했습니다.

마지막으로 버튼에 표시되는 텍스트를 제어하려면 Vue 인스턴스에 계산된 속성을 추가해야 합니다. 다음은 특정 코드입니다.

// App.vue
<template>
  <div>
    <textInput 
      v-model="input" 
      :hidden="hideInput"
    />
    <button @click="toggleHideness">
      {{ buttonText }}
    </button>
  </div>
</template>

<script>
  import textInput from './components/textInput.vue'

  export default {
    name: 'app',
    data() {
      return {
        input: '',
        hideInput: false
      }
    },
    components: {
      textInput
    },
    computed: {
      buttonText() {
        return this.hideInput ? 'Show' : 'Hide' + ' input'
      }
    },
    methods: {
      toggleHideness() {
        this.hideInput = !this.hideInput
      }
    }
  }
</script>

여기에는 hideInput 값을 기반으로 버튼에 표시되는 텍스트를 결정하기 위해 계산된 속성인buttonText를 추가합니다. 이런 식으로 hideInput이 false인 경우 버튼 텍스트는 "Hide input"이고, hideInput이 true인 경우 버튼 텍스트는 "Show input"입니다.

위 코드를 사용하면 Vue를 통해 입력 상자를 숨기는 기능을 쉽게 구현할 수 있습니다. 요약하면 Vue에서 입력 상자를 숨기려면 두 개의 입력 상자가 포함된 구성 요소를 정의하고 이를 숨길지 여부에 대한 정보를 props로 전달하고 계산된 속성을 추가하여 버튼에 표시되는 텍스트를 제어해야 합니다. 숨겨진 입력 상자.

위 내용은 Vue에서 입력 상자의 숨겨진 기능을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!