如何将Vue的在线翻译功能改写为支持长尾词的智能翻译器？

本文共计568个文字，预计阅读时间需要3分钟。

原文示例为：本文字例为大家分享了vue实现在线翻译功能的整体代码，供大家参考，具体内容如下：

最终效果：APP.vuetemplatediv id=apph4 在线翻译h5 简单/易用/方便!-- 表格组件 --+translateForm@for

简化改写后内容：

Vue实现在线翻译功能示例代码，供参考。内容如下：

APP.vuetemplatediv id=apph4 在线翻译h5 简单易用方便translateForm

本文实例为大家分享了vue实现在线翻译功能的具体代码，供大家参考，具体内容如下

最终效果：

APP.vue

<template> <div id="app"> <h4>在线翻译</h4> <h5>简单/易用/方便</h5> <!-- 表单组件 --> <translateForm @formSubmit='translateText'></translateForm> <!-- 显示组件 --> <translateOutput v-text='translatedText'></translateOutput> </div> </template> <script> import TranslateForm from './components/translateForm' import translateOutput from './components/translateOutput' export default { name: 'App', components:{ TranslateForm,translateOutput }, data(){ return{ //翻译出的文字 translatedText:'' } }, methods:{ //点击翻译事件 translateText(text,language){ // alert(text) this.$translate.yandex.net/api/v1.5/tr.json/translate?key=trnsl.1.1.20170721T082515Z.54cf3dc583f679db.f4a96182281281d8b5dfe24b4e88298e2133f219&lang=' +language+'&text='+text) .then((response)=>{ console.log(response.body.text[0]) //翻译结果 this.translatedText = response.body.text[0]; //将翻译结果赋给文本框，传给子组件 }) } } } </script> <style> </style>

表单组件translateForm.vue

<template> <!-- 表单组件 --> <div id="translateForm"> <form @submit="formSubmit" > <input type="text" placeholder='输入需要翻译的内容' v-model="textTotranslate"> <select name="" id="" v-model="language"> <option value="en">English</option> <option value="ru">Russian</option> <option value="ko">Korean</option> </select> <input type="submit" value="翻译"> </form> </div> </template> <script> export default { name: 'translateForm', data () { return { //用户输入的内容 textTotranslate:"", //用户选择的语言 language:"" } }, methods:{ //点击翻译传给父元素 formSubmit(e){ this.$emit("formSubmit",this.textTotranslate,this.language) e.preventDefault(); } } } </script> <style scoped> </style>

显示组件 translateOutput.vue

<template> <!-- 显示组件 --> <div id='translateOutput'> {{translatedText}} </div> </template> <script> export default { name: 'translateOutput', props:[ 'translatedText' ], data () { return { } } } </script> <style scoped> </style>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持易盾网络。