在Vue.js中转换v模型绑定值

Question

考虑以下示例：

<input type="text" v-model="value">
<span>Value is: {{ value }}</span>

我想要的是放置一个双向转换函数，该函数将以一种形式在输入字段中显示值，但以另一种形式将其保留在数据中。 最简单的示例是对数值取负：如果用户输入5 ，我希望数据实际接收−5 。 在Vue.js 1.0中实现此目标的最佳方法是什么？

Answer 1

您可以为此编写一个计算属性：

new Vue({
  el: "#app",
  data: {
    value: 0
  },
  computed: {
    negValue() {return -this.value}
  }
})

然后模板变成

<input type="text" v-model="value">
<span>Value is: {{ negValue }}</span>

https://jsfiddle.net/adf2kLhe/

Answer 2

您可以为此使用观察程序。

每次输入值更改时，观察者将以您想要的任何方式更新数据属性值。 输入的显示值将保持不变，但是您的data属性将具有新的操纵值。

例如：

new Vue({
  el: "#app",
  data: {
    value: 0,
    display_value: 0
  },
  watch: {
      display_value: function (newValue) {
          this.value = -parseInt(newValue);
      }
  }
})

和你的HTML：

<input type="text" v-model="display_value">
<span>Value is: {{ value }}</span>

小提琴： https : //jsfiddle.net/crabbly/30e6h4uj/

Answer 3

您可以使用观察者来设置negValue

new Vue({
  el: "#app",
  data: {
    value: 0,
    negValue: 0
  },
  watcher: {
    value(value) {this.negValue = -value}
  }
})

然后：

<input type="text" v-model="value">
<span>Value is: {{ negValue }}</span>

将其发送到服务器时，只需发送negValue而不是value.