面试题：登陆框不输入内容框下面的提示文字底层是如何实现的？

<template>
  <div>
    <div class="input-wrapper">
      <input  v-model="inputValue" @input="handleInput" type="text" class="input-field" />
      <label class="label-text">请输入您的姓名</label>
    </div>
  </div>
</template>

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

  methods:{
    handleInput(e){
      console.log('Input value changed:', this.inputValue)
      if(this.inputValue){
        document.querySelector('.label-text').style.display = 'none'
      }else{
        document.querySelector('.label-text').style.display = 'block'
      }
    }
  }

};

</script>

<style lang="scss" scoped>
.input-wrapper {
  position: relative;
}
 
.input-field {
  border: 1px solid #ccc;
  padding: 8px;
  border-radius: 4px;
  width: 200px;
  outline: none;
}
 
.label-text {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  transition: 0.2s all ease;
  opacity: 0;
  font-size: 14px;
}
 
.input-field:focus + .label-text, .input-field:valid + .label-text {
  opacity: 1;
  top: 33px;
  color: #333;
  font-size: 12px;
}
</style>

思路：写好布局，然后写好提示信息，使用定位，定位到输入框下面

然后给输入框双向绑定value值，确保起到监听作用，接下来给输入框添加input事件用来处理啥时候提示文字显示的功能，输入框当监听到有内容时隐藏提示文字，如果监听到用户输入内容，获取提示文字的dom元素，给其css样式设为display：none ,隐藏掉，反之给其显示即可