将 %+- 附加到输入字段视图

Question

我正在使用一个与输入字段双向绑定的 vue 组件。

我只想在输入字段视图中向该值附加一个 +- 和一个 % 符号。我不想更改实际值，因为这会导致组件出现问题。

这是我要找的东西：

这是我的：

使用此代码：

<form class="form-container">

  <label for="changePercent" class="move-percent-label">Move Market</label>
  <input class="move-percent" id="changePercent" v-model="value.value" type="number">

  <span class="middle-line"></span>
  <vue-slider v-bind="value" v-model="value.value"></vue-slider>

  <div class="control-buttons">
    <button @click="" class="primary-button">Apply</button>
    <button @click.prevent="value.value = 0;" class="tertiary-button">Reset</button>
  </div>

</form>

----------------更新--------------------

根据下面的答案使用计算的属性。

好：

不好

所以我需要它双向工作

Answer 1

让另一个值始终格式化为计算属性:

new Vue({
  el: '#app',
  data: {
    value: {value: 0},
    // ..
  },
  computed: {
    readableValue() {
      return (this.value.value => 0 ? "+" : "-" ) + this.value.value + "%";
    }
  }
})

正在为滑块创建一个编辑器并显示格式化

为了得到你想要的东西，我们必须用两个输入做一个小把戏。因为您希望用户在 <input type="number"> 中进行编辑，但还想显示 +15% 而无法在 <input type="number"> 中显示（因为 + 和 %不是数字）。所以你必须做一些 showing/hiding，如下所示：

new Vue( {
  el: '#app',
  data () {
    return {
     editing: false,
     value: {value: 0},
    }
  },
  methods: {
   enableEditing() {
      this.editing = true;
      Vue.nextTick(() => { setTimeout(() => this.$refs.editor.focus(), 100) });
    },
    disableEditing() {
      this.editing = false;
    }
  },
  computed: {
    readableValue() {
      return (this.value.value > 0 ? "+" : "" ) + this.value.value + "%";
    }
  },
  components: {
    'vueSlider': window[ 'vue-slider-component' ],
  }
})

/* styles just for testing */
#app { margin: 10px; }
#app input:nth-child(1) { background-color: yellow }
#app input:nth-child(2) { background-color: green }

<div id="app">
  
  <input :value="readableValue" type="text" v-show="!editing" @focus="enableEditing">
  <input v-model.number="value.value" type="number" ref="editor" v-show="editing" @blur="disableEditing">
  <br><br><br>
  <vue-slider v-model="value.value" min="-20" max="20">></vue-slider>

</div>
<script src="https://unpkg.com/vue@2.5.13/dist/vue.min.js"></script>
<script src="https://nightcatsama.github.io/vue-slider-component/dist/index.js"></script>

将 %+- 附加到输入字段视图

Appending %+- to Input field view

html

css

vue.js

vuejs2

vue-slider-component

正在为滑块创建一个编辑器并显示格式化