引用js文件实现汉字转拼音

最新推荐文章于 2025-11-28 15:56:48 发布

原创最新推荐文章于 2025-11-28 15:56:48 发布 · 612 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #elementui

本文介绍了如何在Vue应用中使用PinyinUtil.js库将HTML输入框中的汉字转换为拼音。通过`pinyinUtil.getPinyin(this.inputText)`方法，实现实时输入并显示拼音，且默认无空格。

先看效果

具体需求是第一个文本框输入汉字，第三个显示拼音，

先引用js

<script src="/js/pinyinutil.js"></script>

html这样

 <el-input v-model="inputText" style="width:220px" placeholder="请输入真实姓名" v-on:input="updateText"></el-input>




<el-input v-model="outputText" style="width:220px" placeholder="请输入登录名" ></el-input>

<script>
export default {
  data() {
    return {
      inputText: '',
      outputText: ''
    };
  },
  methods: {
    updateText(event) {
      this.outputText = pinyinUtil.getPinyin(this.inputText,'');
    
  }
};
</script>

精髓就在这一句

pinyinUtil.getPinyin(this.inputText,'');

其中 this.inputText是你的文本框取值，这一句输出的例子为

Console.log(pinyinUtil.getPinyin('你好',''))//nihao

输出的值为

nihao

注意！！

这里的nihao的中间是没有空格的。如果想变成ni hao 只需这样写就搞定了

Console.log(pinyinUtil.getPinyin('你好'))//ni hao