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