在Vue.js

Question

变换V模型绑定值

考虑这个例子：

<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, 
    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 2

你可以只写一个计算的属性：

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 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.