Question

我编写了使用vue cli方法递增和递减值的代码，但这些方法未返回任何内容。但是默认值是在html上打印的，我该如何也获取方法值。

----------
//html
<div class="col-sm-4">
                <div class="counter">
                <center>Adults</center>
                <div class="row"> 
                  <div class="col-sm-1">
                    <span class="fas fa-minus" v-on:click="adec"></span>
                  </div>
                  <div class="col-sm-10">
                    <center>{{adult}}</center>
                  </div>
                  <div class="col-sm-1">
                    <span class="fas fa-plus"  v-on:click="ainc"></span>
                  </div>
                </div>
              </div>
              </div>
----------
vue.js code 

<script>
export default {
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      adult:1,
    }
  },
  methods:{
    ainc(){
     this.adult++;
    },
    adec(){
     this.adult--;
    },
  }
}
</script>

Answer 1

我不确定这是否有帮助，但请告诉我是否有帮助：

<template>
  <div class="pt-5">
    <div class="row">
      <div class="col-sm-4">
        <button v-on:click="adec">minus</button> adult: {{adult}} | adec(): {{ainc()}}
      </div>
      <div class="col-sm-4">
        <button v-on:click="ainc">plus</button> adult: {{adult}} |  ainc(): {{adec()}}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: 'Welcome to Your Vue.js App',
      adult: 1,
    };
  },
  methods: {
    ainc() {
      this.adult += 1;
      return this.adult;
    },
    adec() {
      this.adult -= 1;
      return this.adult;
    },
  },
};
</script>

我如何从Vue CLI方法返回更新的变量值

1 个答案: