如何在带有typescript的Vue中使用变量值作为占位符

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根据v-model值更改文本输入的占位符.

我们需要这样使用它：

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