がVue.js

Question

のVモデルバインドされた値を変換

は、この例を考えてみましょう：

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

私が欲しいのは一つの形式で入力フィールドに値を提示する双方向変換機能を置くことですが、それを維持します別の形式のデータで最も単純な例は、数値を無効にすることです：ユーザーが5を入力した場合、データが実際に−5を受け取るようにしたいと思います。 Vue.js 1.0でこれを達成する最善の方法は何でしょうか？

Answer 1

のnegValueを送って、それをサーバに送信します。

入力値が変更されるたびに、ウォッチャーは任意の方法でデータプロパティ値を更新します。入力表示値は同じままですが、データプロパティは新しい操作値を持ちます。 EXのために

：

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} 
    } 
}) 

012その後

：

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

あなたはちょうどあなたがこのためにウォッチャーを使用することができます代わりにvalue.