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

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

为滑块创建编辑器并显示格式化

为了得到你想要的，我们必须用两个输入做一个小技巧。因为您希望用户在 a 中进行编辑，<input type="number">但还希望显示+15%哪些不能在 a 中显示<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>