<div id='app'>

  <div>{{ item.num1 | toThousand }}</div>

  <input type="text" placeholder="邊輸入要邊轉千位數" id="thousandInput" maxlength="10" @input='inputToThousand("thousandInput")' :value='thousand(item.num2)'>

  <div>加總 : {{ sum() | toThousand }}</div>

</div>

* {

  box-sizing: border-box;

  line-height: 1.3;

}

body {

  max-width: 700px;

  padding: 15px;

  font-family: "Roboto", "Noto Sans TC";

}

div {

  line-height: 1.5;

  span {

    background: #c3c3c3c3;

    padding: 0 2px;

    margin: 2px;

    text-align: center;

  }

}

input {

  width: 300px;

  font-size: 20px;

  margin: 10px;

}

button {

  border: 1px #e0e0e0 solid;

  padding: 8px 16px;

}

button.active {

  background: #fff;

}

​

const app = new Vue({

  el: "#app",

  data() {

    return {

      item: { num1: 1000, num2: 1500, total: 0 }

    };

  },

  methods: {

    thousand(data) {

      //:value='thousand(item.num2)'

      // console.log("thousand", data);

      let a = data;

      a = a.toString();

      return a.replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ",");

    },

    inputToThousand(id) {

      let el = document.getElementById(`${id}`);

      this.item.num2 = Number(el.value.replace(/,/g, ""));

      console.log("item.num2", this.item.num2, "input value", el.value);

    },

    sum() {

      // console.log(this.item.num1 + this.item.num2);

      return (this.item.total = this.item.num1 + this.item.num2);

    }

  },

  filters: {

    toThousand: (data) => {

      data = data.toString();

      return data.replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ",");

    }

  }

});

​