使用输入量

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>

使用输入量

Amount using input

javascript

input

vue.js