使用输入的金额

Question

刚开始vue的旅程，如何让input数据本身带一个数字，然后显示在一个变量中，如果输入2次，就加起来。

<template>
    <div class="portfel">
        <div class="profile">
            <div class="content__prof">
                <div class="ico__prof"><img src="" alt=""></div>
                <div class="buttom__prof">
                    <input id="txtName" @keyup.enter="addMessage" v-model="myMoney" type="text">
                    <button @click="addMoney">Sum</button>
                </div>
                <div class="value__prof">
                    <div>$: {{myMoney}}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
        data(){
        return{
            myMoney:null,
            dollar:0
        }

    },
    methods:{
        addMomey(){
            this.myMoney.push(this.myMoney) 
        }


    }
}

我试过这样做，但结果只是直接转移到变量

Answer 1

Check this out:

<script>
export default {
  data() {
    return {
      myMoney: 0,
      dollar: 0
    }
  },
  methods: {
    addMoney() {
      this.dollar += this.myMoney
    }
  }
}
</script>

<template>
  <input v-model.number="myMoney" />
  <button @click="addMoney">Add
  </button>
  <div>
    dollar: {{this.dollar}}
  </div>
</template>

---

如果要使用回车，将其包装在一个表单中并监听@submit.prevent、like this：

<form @submit.prevent="addMoney">
  <input v-model.number="myMoney" />
  <button type="submit">Add</button>
</form>