vue 后台翻译_vue实现在线翻译功能

2024-05-08 13:55:44

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

最终效果：

APP.vue

在线翻译

简单/易用/方便

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.$http.get('https://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]; //将翻译结果赋给文本框，传给子组件

})

}

}

}

表单组件 translateForm.vue

English

Russian

Korean

export default {

name: 'translateForm',

data () {

return {

//用户输入的内容

textTotranslate:"",

//用户选择的语言

language:""

}

},

methods:{

//点击翻译传给父元素

formSubmit(e){

this.$emit("formSubmit",this.textTotranslate,this.language)

e.preventDefault();

}

}

}

显示组件 translateOutput.vue

{{translatedText}}

export default {

name: 'translateOutput',

props:[

'translatedText'

],

data () {

return {

}

}

}

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

本文标题: vue实现在线翻译功能

本文地址: http://www.cppcns.com/wangluo/javascript/276660.html

vue 后台翻译_vue实现在线翻译功能相关推荐

基于python爬取有道翻译，并在线翻译
基于python爬取有道翻译,并在线翻译由于我也是爬虫新学者,有什么做的不对的请多加包涵我们需要使用的库如下 from urllib import request import urllib im ...
python代码翻译-python实现在线翻译
本文实例为大家分享了python实现在线翻译的具体代码,供大家参考,具体内容如下具体效果请看图代码: import urllib.request import urllib.parse impor ...
python发音翻译-python实现在线翻译
本文实例为大家分享了python实现在线翻译的具体代码,供大家参考,具体内容如下具体效果请看图代码: import urllib.request import urllib.parse impor ...
pdf在线翻译_如何在线翻译整篇PDF论文？
1.首先需要准备一个具有网页在线翻译的浏览器,这里推荐Google Chrome,国内的QQ.360浏览器等同样可以,但需安装相应的翻译插件. (Chrome浏览器自动翻译) 2.准备好需要翻译的外文 ...
PDF如何在线翻译？PDF在线翻译的方法
在办公或者学习的时候总会遇到大篇幅的英文文件,查起来又不方便,自己阅读又很艰难,那如何去解决翻译PDF文件的这一问题呢,请让小编来为大家整理翻译过程,仔细看哦. 操作工具:[迅捷PDF转换器] 1:打 ...
python翻译-python实现在线翻译
本文实例为大家分享了python实现在线翻译的具体代码,供大家参考,具体内容如下具体效果请看图代码: import urllib.request import urllib.parse impor ...
vue后台系统管理项目-菜单权限管理功能
vue后台系统管理项目: 技术选型:vue + element-ui 菜单权限管理模块功能菜单列表查询,通过(菜单名称:类型分为:全部.一级菜单.二级菜单:状态:启用.禁用)进行数据搜索. 查询.重 ...
百度api翻译html,百度在线翻译API （使用实例）
[实例简介] 在http://api.fanyi.baidu.com/ 注册API使用的ID就可以使用的翻译工具,简化翻译过程,不用每次都打开网页. [实例截图]需要字自己注册APIID才行哦 [核心 ...
python有道字典翻译_Python 调取有道翻译接口实现在线翻译功能
有道翻译有反爬虫机制,它使用了加密技术.如果你的程序报错,你可以通过搜索.查阅资料找到解决方案:尝试把访问的网址中"/translate_o"中的"_o"删除. ...
Java项目:(前端vue后台java微服务)在线考试系统(java+vue+springboot+mysql+maven)
源码获取:博客首页 "资源" 里下载! 考试流程: 用户前台注册成为学生管理员后台添加老师,系统将该用户角色上升为老师老师登录,添加考试,添加题目,发布考试考生登录前台参加考 ...

最新文章

热门文章