vue watch

20180103

by Syuan Shih

HTML

<div id="app">
    <p>g(公克)：<input type="text" v-model="g"></p>
    <p>kg(公斤)：<input type="text" v-model="kg"></p>
    <p>t(公噸)：<input type="text" v-model="t"></p>
</div>

JavaScript

var vm = new Vue ({
    el: '#app',
    data: {
        g: 0,
        kg: 0,
        t: 0
    },
    watch: {
        g: function(value) {
            this.g = value;
            this.kg = value / 1000;
            this.t = value / 1000 / 1000;
        },
        kg: function(value) {
            this.g = value * 1000;
            this.kg = value;
            this.t = value / 1000;
        },
        t: function(value) {
            this.g = value * 1000 * 1000;
            this.kg = value * 1000;
            this.t = value;
        }
    }
});