in Vue.js

Question

dieses Beispiel vor:

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

Was ich will, ist eine bidirektionale Transformationsfunktion setzen, die den Wert in dem Eingabefeld in einer Form darstellen würden, aber es hält in den Daten in einer anderen Form. Das einfachste Beispiel wäre die Negation von numerischen Werten: Wenn der Benutzer 5 eingibt, möchte ich, dass die Daten tatsächlich −5 erhalten. Was wäre der beste Weg, dies in Vue.js 1.0 zu erreichen?

Answer 1

Sie Beobachter dafür nutzen könnten.

Jedes Mal, wenn sich der Eingabewert ändert, aktualisiert der Watcher den Dateneigenschaftswert auf beliebige Weise. Der eingegebene Anzeigewert bleibt gleich, aber Ihre Dateneigenschaft hat den neuen manipulierten Wert.

Für ex .:

new Vue({ 
    el: "#app", 
    data: { 
    value: 0, 
    display_value: 0 
    }, 
    watch: { 
     display_value: function (newValue) { 
      this.value = -parseInt(newValue); 
     } 
    } 
}) 

Und Ihre html:

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

Fiddle: https://jsfiddle.net/crabbly/30e6h4uj/

Answer 2

Sie können eine berechnete Eigenschaft für das nur schreiben:

new Vue({ 
    el: "#app", 
    data: { 
    value: 0 
    }, 
    computed: { 
    negValue() {return -this.value} 
    } 
}) 

Und dann wird die Vorlage

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

https://jsfiddle.net/adf2kLhe/

Answer 3

Sie einen Watcher negValue

new Vue({ 
    el: "#app", 
    data: { 
    value: 0, 
    negValue: 0 
    }, 
    watcher: { 
    value(value) {this.negValue = -value} 
    } 
}) 

einstellen können

Dann:

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

Wenn Sie es an den Server senden, senden Sie einfach negValue statt value.