vue组件中使用外部js方法

<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

回答:

如果要在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
}

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注