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

Posted 2023-02-22

【中文标题】直接在 HTML 标签中使用 Vue-JS 自定义辅助函数

【英文标题】：Use Vue-JS custom helper functions directly in HTML tags

【发布时间】：2018-11-10 01:45:51

【问题描述】：

我在 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 中使用辅助函数

【问题讨论】：

这在很多方面都是错误的，我不知道如何帮助你。我建议你重新阅读 Vue 文档，看看如何使用 Vue。

嗨，你为什么这么说？也请解释一下评论。

@JacobGoh 我已经更新了我的代码，请立即查看。我仍然需要在 HTML 中直接使用辅助函数。

@HasnatSafder 你能解释一下你想做什么吗？您想忽略某些关键事件吗？但它是在文本输入中

检查 vuejs.org/v2/guide/events.html 以获取事件修改

【参考方案1】：

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

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

在你的 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 的原因。

所以我强烈建议你将它重构为它的微调器组件 拥有。

<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 代码重用性。

【讨论】：

谢谢，请在我的问题中查看更新后的代码。所以基本上我不能直接使用它？