vue中的input框回显的数据为灰色，输入时为黑色: 代码不通过伪类实现

可以使用计算属性来动态计算input框的class，从而实现回显数据的灰色文本颜色。具体可以通过以下代码实现：

<template>
  <div>
    <input type="text" v-model="inputValue" :class="inputClass">
  </div>
</template>

<script>
  export default {
    data() {
      return {
        inputValue: 'Hello Vue!'
      }
    },
    computed: {
      inputClass() {
        return {
          'my-input': true,
          'readonly': this.inputValue !== ''
        }
      }
    }
  }
</script>

<style>
  .my-input {
    color: black; /* 输入时的颜色为黑色 */
  }
  .readonly {
    color: gray; /* 回显数据的颜色为灰色 */
  }
</style>

在上述代码中，通过计算属性`inputClass`来动态计算input框的class。其中，如果inputValue不为空，则会应用“readonly”这个class，从而实现回显数据的灰色文本颜色。

相关问题

vue中的input框回显的数据为灰色，输入时为黑色: 代码

可以使用CSS样式来修改input框回显数据的颜色和输入时的颜色，具体可以通过以下代码实现：

<template>
  <div>
    <input type="text" v-model="inputValue" class="my-input">
  </div>
</template>

<style>
  .my-input {
    color: black; /* 输入时的颜色为黑色 */
  }
  .my-input::placeholder {
    color: gray; /* 回显数据的颜色为灰色 */
  }
</style>

在上述代码中，使用了CSS的伪类选择器`::placeholder`来对input框的回显数据进行样式设置。同时，通过设置class为“my-input”来对所有具有该class的input框应用这些样式。

vue的input框中实现数据的回显，回显的数据字体样式为灰色，输入框中输入值样式为黑色，

你可以在 Vue 组件中使用 v-model 双向绑定来实现 input 框中的数据回显。具体实现方式如下：

HTML 代码：

<template>
  <div>
    <input type="text" v-model="inputValue" :style="{ color: inputColor }">
  </div>
</template>

JavaScript 代码：

<script>
export default {
  data() {
    return {
      inputValue: '',  // input 框中的输入值
      inputColor: 'gray'  // 回显的数据字体样式为灰色
    }
  },
  watch: {
    inputValue(newValue) {
      // 输入框中输入值样式为黑色
      if (newValue !== '') {
        this.inputColor = 'black';
      } else {
        this.inputColor = 'gray';
      }
    }
  }
};
</script>

在上面的代码中，我们通过 data() 函数定义了 inputValue 和 inputColor 两个变量，分别用于存储 input 框中的输入值和回显的数据字体样式。然后，我们通过 v-model 双向绑定将 input 框中的输入值和 inputValue 变量关联起来。在 watch 属性中，我们监听了 inputValue 变量的变化，并通过修改 inputColor 变量的值来改变回显的数据字体样式。注意，我们在监听器中判断了 inputValue 变量是否为空字符串，如果为空字符串，则回显的数据字体样式为灰色，否则回显的数据字体样式为黑色。