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

【问题标题】：Transform v-model bound value in Vue.js在 Vue.js 中转换 v-model 绑定值
【发布时间】：2017-04-10 10:00:07
【问题描述】：

考虑这个例子：

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

我想要的是放置一个双向转换函数，它将以一种形式呈现输入字段中的值，但将其以另一种形式保存在数据中。最简单的例子是否定数值：如果用户输入5，我希望数据实际接收−5。在 Vue.js 1.0 中实现这一目标的最佳方式是什么？

【问题讨论】：

所以你的意思是对输入进行格式化，使其显示为5，但实际上是-5？
@AmreshVenugopal 是的，差不多。

标签： javascript data-binding vue.js bidirectional

【解决方案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/

【讨论】：

那只是否定了价值的呈现； data.value 没有被否定。我需要否定数据，而不是它的表示，因为数据然后被发布到服务器端，这就是需要减号的地方。
只发negValue 而不是value 我没发现问题。

【解决方案2】：

您可以为此使用观察者。

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

例如：

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/

【讨论】：

【解决方案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.

【讨论】：