先看效果

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

先引用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>

js

<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