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

Vue.js change placeholder of text input according to v-model value(Vue.js 根据 v-model 值更改文本输入的占位符)

问题描述

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

I need to change placeholder of a text input via Vue.js data binding. Here is my code.

<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 代码...

Here is my vue code...

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>

I have changed {{ delimiters to [[ and using select2 Wrapper Component. I need to change power_to and power_from input placeholders according to v-model="power"

推荐答案

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

You should use placeholder property notation in this case :placeholder="[[ power ]]":

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

这篇关于Vue.js 根据 v-model 值更改文本输入的占位符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！