用法

Question

我是Vue.js的新手，仍在练习所有功能。我想知道如何基于这段代码编写可重用的递增和递减函数 - 这就是我现在所拥有的，但它是重复的。所以我想对两个不同的按钮使用递增/递减功能。 Here's jsfiddle demo!

 new Vue ({
  el: "#pomodoro-clock",
  data: {
    breakLength: 5,
    sessionLength: 25,
  },
  methods: {
    addBreak: function(inc){
      this.breakLength += inc;
    },
    subtractBreak: function(dec){
      if(this.breakLength === 1) return;
      this.breakLength -= dec;
    },
    addSession: function(inc){
      this.sessionLength += inc;
    },
    subtractSession: function(dec){
      if(this.sessionLength === 1) return;
      this.sessionLength -= dec;
    }
  }
});

Answer 1

以下是可重用方法的示例。

methods: {
  inc(property, amt){
    this[property] += amt
  },
  dec(property, amt){
    if (this[property] === 1) return
    this[property] -= amt
  },
  ...
}

在你的模板中：

<span class="clock__btn--add" v-on:click="inc('breakLength', 1)">+</span>
<span class="clock__break-length">{{breakLength}}</span>
<span class="clock__btn--subtract" v-on:click="dec('breakLength', 1)">-</span>

更新了fiddle。

Answer 2

您可以将新文件名创建为functions.js，然后在文件中定义所有功能。

export default function (Vue) {

    Vue.functions = {

        // increment function
        increment (data, inc) {
            data += inc;
            return data;
        },

        // decrement function
        decrement (data, dec) {
            data -= dec;
            return data;
        }

    }

    Object.defineProperties(Vue.prototype, {
        $functions: {
            get: () => {
                return Vue.functions
            }
        }
    })
}

您现在可以在main.js

中导入您的功能

import Functions from './functions.js'
Vue.use(Functions)

用法

在组件中，您可以使用this.$functions

对函数进行对象

new Vue ({
  el: "#pomodoro-clock",
  data: {
    breakLength: 5,
    sessionLength: 25,
  },
  methods: {
    addBreak: function(inc){
      this.breakLength = this.$functions.increment(this.breakLength, inc)
    },
    subtractBreak: function(dec){
      if(this.breakLength === 1) return;
      this.breakLength = this.$functions.decrement(this.breakLength, dec)
    },
    addSession: function(inc){
      this.sessionLength = this.$functions.increment(this.sessionLength, inc)
    },
    subtractSession: function(dec){
      if(this.sessionLength === 1) return;
      this.sessionLength = this.$functions.decrement(this.sessionLength, dec)
    }
  }
});

或者为了节省时间，您可以使用buttons

直接在$functions.functionName上使用

<button @click="breakLength = $functions.increment(breakLength, inc)">Increment Value</button>

希望这有帮助！

Vue.js中可重用的递增和递减函数

2 个答案:

用法