Vue.js 根据 v-model 值更改文本输入的占位符

Posted 2023-05-07

【中文标题】Vue.js 根据 v-model 值更改文本输入的占位符

【英文标题】：Vue.js change placeholder of text input according to v-model value

【发布时间】：2019-05-11 09:29:57

【问题描述】：

我需要通过 Vue.js 数据绑定更改文本输入的占位符。这是我的代码。

<select2 :options="power_options" v-model="power">
    <option selected value="hp">hp</option>
    <option value="kW">kW</option>
</select2>

<input name="power_to" type="text" 
    class="form-control pwer_change" v-model="power_from"
    placeholder='[[ power ]]' style="display: inline;width: 48%;">

<input name="power_from" type="text" 
    class="form-control pwer_change" v-model="power_to"
    placeholder="[[ power ]]" style="display: inline;width: 48%;">

这是我的 vue 代码...

var vm = new Vue(
  el: '#el',
  delimiters: ["[[", "]]"],
  data: 
    power: "hp",
    power_from: null,
    power_to: null,
  ,
  created() 

  ,
  methods: 

  
);

我已将 分隔符更改为 [[ 并使用 select2 包装组件。我需要根据v-model="power"

更改power_to和power_from输入

placeholders

【参考方案1】：

在这种情况下，您应该使用占位符属性表示法:placeholder="[[ power ]]"：

<input
  name="power_to"
  type="text"
  class="form-control pwer_change"
  v-model="power_from"
  :placeholder="[[ power ]]"
  style="display: inline;width: 48%;"
/>

【讨论】：

不客气。如果您需要在占位符中添加一些静态单词，语法需要是这样的：:placeholder="'Enter value of ' + [[ power ]]".