vue中input输入框不输入内容输入框变红且提示文字实现列子

您可以使用 Vue 的数据绑定和计算属性来实现这个功能。具体实现步骤如下：

1. 在 Vue 的 data 中定义一个变量，用于存储 input 输入框的值。

data() {
  return {
    inputValue: ''
  }
}

2. 在 input 输入框中绑定这个变量，并添加一个 change 事件。

<input type="text" v-model="inputValue" @change="checkInput">

3. 在 methods 中定义 checkInput 方法，用于检查输入框的值是否为空。如果为空，将提示文字变成红色，并在提示文字中显示错误信息。

methods: {
  checkInput() {
    if (this.inputValue === '') {
      this.$refs.errorMsg.style.color = 'red';
      this.$refs.errorMsg.innerHTML = '输入框不能为空';
    } else {
      this.$refs.errorMsg.style.color = 'black';
      this.$refs.errorMsg.innerHTML = '';
    }
  }
}

4. 在模板中添加一个 span 元素，用于显示错误信息，并添加一个 ref 属性，用于在 checkInput 方法中引用这个元素。

<span ref="errorMsg"></span>

5. 在计算属性中定义一个变量，用于控制提示文字的显示和隐藏。

computed: {
  showErrorMsg() {
    return this.inputValue === '';
  }
}

6. 在模板中绑定这个变量，并根据其值显示或隐藏提示文字。

<span v-show="showErrorMsg" style="color: red">输入框不能为空</span>

完整的代码如下：

<template>
  <div>
    <input type="text" v-model="inputValue" @change="checkInput">
    <span ref="errorMsg" v-show="showErrorMsg" style="color: red"></span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    }
  },
  methods: {
    checkInput() {
      if (this.inputValue === '') {
        this.$refs.errorMsg.style.color = 'red';
        this.$refs.errorMsg.innerHTML = '输入框不能为空';
      } else {
        this.$refs.errorMsg.style.color = 'black';
        this.$refs.errorMsg.innerHTML = '';
      }
    }
  },
  computed: {
    showErrorMsg() {
      return this.inputValue === '';
    }
  }
}
</script>