vue组件中使用外部js方法

Question

<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}
}`
报错

在methods中可以掉用starPhone()方法

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

在methods中挂载一下方法

Answer 1

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

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

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

望采纳

Answer 2

上面正答，需要挂载；根据业务场景推荐使用 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>

Answer 3

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

Answer 4

可以在 created 里挂载一下

created() {
    this.starPhone = starPhone
}