html - 将 %+- 附加到输入字段 View

Question

我正在使用一个 vue 组件，它与一个输入字段是双向绑定(bind)的。

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

这是我要找的:

这是我的:

使用这段代码:

<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 + "%";
    }
  }
})

为 slider 创建一个编辑器并显示格式化

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

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>