如何在Vue中使用TypeScript将变量值​​用作占位符

Question

<input type="text" placeholder="{{fromTimeWindow}}" v-model="fromTimeWindow"/>

或<input type="text" v-bind:placeholder="{{fromTimeWindow}}" v-model="fromTimeWindow"/>

上面的代码

都给我错误。我想使用变量“ fromTimeWindow”作为占位符。

Answer 1

您无需{{ }}，因为您已将其绑定到占位符。要解决该问题，请将您的代码更改为此。

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

Answer 2

new Vue({
el: '#app',
data: () => {
  return {
    fromTimeWindow: 'Hey here is custom placeholder'
    }
}
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<input type="text" :placeholder="fromTimeWindow" />
</div>

Answer 3

啊。。得到了答案：Vue.js change placeholder of text input according to v-model value 。

我们需要像这样使用它：

<input type="text" :placeholder="[[fromTimeWindow]]" v-model="fromTimeWindow"/>