在 Vue.js 中转换 v-model 绑定值

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

你可以使用观察者来设置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.

Answer 3

您可以为此使用观察器。

每次输入值改变时，watcher 都会以您想要的任何方式更新数据属性值。输入显示值将保持不变，但您的数据属性将具有新的操作值。

例如：

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>

Fiddle: https://jsfiddle.net/crabbly/30e6h4uj/

在 Vue.js 中转换 v-model 绑定值

Transform v-model bound value in Vue.js

javascript

data-binding

bidirectional

vue.js