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

Question

我需要通过 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

Answer 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%;"
/>