vue组件中使用外部js方法

拇指一代
  • 290

<div class="notic">{{ starPhone(phone) }}</div>
import { starPhone } from '@/utils/afterData'

utils/afterData

`export function starPhone(phoneNum) {
const start = phoneNum.slice(0, 3)
const end = phoneNum.slice(-4)
return ${start}****${end}
}`
报错
image.png
在methods中可以掉用starPhone()方法

如果在methods中写一个starPhone方法 页面中可以直接掉用,为什么引入的js方法在组件页面中不能直接使用呢

在methods中挂载一下方法
image.png

回复
阅读 3.8k
4 个回答
Ruofee
  • 188
✓ 已被采纳

如果要在template中使用变量或是函数,请先注册到data或是methods中:

<template>
    <div>{{title}} {{resolve(title)}}</div>
</template>

<script>
    export default {
        data() {
            return {
                title: '...'
            };
        },
        methods: {
            resolve(title) {
                return title;
            }
        }
    };
</script>

望采纳

上面正答,需要挂载;根据业务场景推荐使用 filter,因为这个函数不依赖于 this 组件实例。

// utils/afterData

export function starPhone(phoneNum) {
  return phoneNum.replace(/(\d{3})\d+(\d{4})/g, '$1****$2');
}
<div class="notic">{{ phone | starPhone  }}</div>
<script>
import { starPhone } from '@/utils/afterData'

export default {
  data() {
    return {
      title: '...'
    };
  },
  filters: {
    starPhone
  }
}
</script>

你可以这样理解, template里面调用方法相当于 this.xxx 因为他没找到this.starPhone方法

可以在 created 里挂载一下

created() {
    this.starPhone = starPhone
}
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏