直接在HTML标记中使用Vue-JS自定义帮助函数

时间:2018-05-31 06:02:36

标签: javascript function vue.js vuejs2 vue-component

我在VueJS中有我的帮助函数,我可以在JavaScript中调用它但不能在HTML标记中使用它。以下是我的helper.js函数。

//Helper JS file
const allowNumbers = e => {
  var key = e.which || e.keyCode;

  if (!e.shiftKey && !e.altKey && !e.ctrlKey &&
  // numbers   
      key >= 48 && key <= 57 ||
  // Numeric keypad
      key >= 96 && key <= 105 ||
  // comma, period and minus, . on keypad
    key == 190 || key == 188 || key == 109 || key == 110 ||
  // Backspace and Tab and Enter
    key == 8 || key == 9 || key == 13 ||
  // Home and End
    key == 35 || key == 36 ||
  // left and right arrows
    key == 37 || key == 39 ||
  // Del and Ins
    key == 46 || key == 45)
      return true
  e.preventDefault()
  return false
}
export {
  allowNumbers
}

我在Vue组件中导入它但是它给出了“函数未定义”的错误。我的Vue文件是。

<!-- Vue component file -->
<input maxlength="4" type="text" @keydown="allowNumbers" />

<script>
import {allowNumbers} from '@/helpers'
</script>

注意:我已经更新了我的代码,但我还是需要一些方法直接在HTML中使用辅助函数

1 个答案:

答案 0 :(得分:2)

关于从vue模板访问和数据或功能的问题确保该属性在数据选项中 或在方法下列出。 假设我们有以下辅助函数

//Helper JS file
const utilFunc = num => {
  if (num < 0) {
    return "negetive";
  }
  return "posetive";
};
export { utilFunc };

在yout vue组件中

<template>
  <div id="app">
  {{val}}
  {{proxyUtilFunc(-9)}}
  </div>
</template>

<script>
import { utilFunc } from "@/helpers";
export default {
  name: "App",
   methods: {
      proxyUtilFunc: utilFunc
  },
  data() {
    return {
      val: utilFunc(5)
    };
  }
};
</script>

但正如我所注意到的,您正在尝试使用动态样式值呈现HTML,这正是我们需要 components 的原因。

  

所以我强烈建议你将它重构为spinner组件   自己的。

<template>
  <div>
    <i v-bind:style="{fontSize: size + 'px' }" class='fa fa-spinner fa-spin'></i>
  </div>
</template>

<script>

export default {
  name: "MySpinner",
  props: {
    size: {
      type: Number
    }
  }
};
</script>

这是一个sandbox来试验。

  

注意:请考虑检查官方的代码可重用性部分   documentation使用directives vue mixins vue   plugins 代码可重用性。