在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

您可以为此使用观察者。

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

例如：

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/