Question

我想在我的vue-app的输入字段中添加动态占位符，因此我执行了以下操作：

<template>
  <div>
    <input type="text" v-model="text" :placeholder="placeholder" />
  </div>
</template>

export default {
  data() {
    return {
      text: '',
      placeholder: 'Some placeholder text'
    }
  }
}

到目前为止还不错，但是由于某种原因，我不知道，占位符文本不可见/不显示，即使当我检查输入时，占位符文本在DOM中还是可见的。< / p>

我在这里想念什么？

Answer 1

您缺少一个script标签

尝试

<template>
  <div>
    <input type="text" v-model="text" :placeholder="placeholder" />
  </div>
</template>


<script>
export default {
  data() {
    return {
      text: '',
      placeholder: 'Some placeholder text'
    }
  }
}
</script>

Answer 2

我自己弄清楚了！由于输入的background-color是白色的，因此我不得不在css上添加一些颜色，所以终于可以使用了！

Answer 3

我还发现我的输入组件 BG 颜色已设置为“bg-grey-800”（tailwind CSS）：所以我更改了它。有用！谢谢

VueJS输入的占位符文本未显示

3 个答案: