vue实现在线翻译功能


Posted in Javascript onSeptember 27, 2019

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

最终效果:

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.$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]; //将翻译结果赋给文本框,传给子组件
   })
  }
 }
}
</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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery ajax abort()的使用方法
Oct 28 Javascript
Javascript无阻塞加载具体方式
Jun 28 Javascript
jquery中常用的函数和属性详细解析
Mar 07 Javascript
javascript常见用法总结
May 22 Javascript
jQuery层级选择器用法分析
Feb 10 Javascript
jQuery中$.ajax()和$.getJson()同步处理详解
Aug 12 Javascript
JS实现自动变换的菜单效果代码
Sep 09 Javascript
AngularJS入门教程之Helloworld示例
Dec 25 Javascript
javascript 面向对象function详解及实例代码
Feb 28 Javascript
Angular 2 利用Router事件和Title实现动态页面标题的方法
Aug 23 Javascript
浅析node.js的模块加载机制
May 25 Javascript
JavaScript学习教程之cookie与webstorage
Jun 23 Javascript
webpack 处理CSS资源的实现
Sep 27 #Javascript
微信小程序 wxParse插件显示视频问题
Sep 27 #Javascript
layui上传图片到服务器的非项目目录下的方法
Sep 26 #Javascript
layui(1.0.9)文件上传upload,前后端的实例代码
Sep 26 #Javascript
vue实现全匹配搜索列表内容
Sep 26 #Javascript
vue实现节点增删改功能
Sep 26 #Javascript
浅谈layui里的上传控件问题
Sep 26 #Javascript
You might like
php实现微信扫码自动登陆与注册功能
2016/09/22 PHP
总结一些PHP中好用但又容易忽略的小知识
2017/06/02 PHP
php实现与python进行socket通信的方法示例
2017/08/30 PHP
PHP receiveMail实现收邮件功能
2018/04/25 PHP
用Javascript 获取页面元素的位置的代码
2009/09/25 Javascript
一个简单的网站访问JS计数器 刷新1次加1次访问
2012/09/20 Javascript
jquery formValidator插件ajax验证 内容不做任何修改再离开提示错误的bug解决方法
2013/01/04 Javascript
jQuery检测滚动条是否到达底部
2015/12/15 Javascript
浅谈JavaScript 函数参数传递到底是值传递还是引用传递
2016/08/23 Javascript
如何学JavaScript?前辈的经验之谈
2016/12/28 Javascript
基于jQuery实现Ajax验证用户名是否可用实例
2018/03/25 jQuery
Vue.js+cube-ui(Scroll组件)实现类似头条效果的横向滚动导航条
2019/06/24 Javascript
基于JS实现简单滑块拼图游戏
2019/10/12 Javascript
JS如何实现网站中PC端和手机端自动识别并跳转对应的代码
2020/01/08 Javascript
[02:16]2018年度CS GO最具人气选手-完美盛典
2018/12/16 DOTA
Python日期操作学习笔记
2008/10/07 Python
Python多线程编程(五):死锁的形成
2015/04/05 Python
Python实现全角半角字符互转的方法
2016/11/28 Python
pandas 将list切分后存入DataFrame中的实例
2018/07/03 Python
解决PyCharm import torch包失败的问题
2018/10/13 Python
Python常用编译器原理及特点解析
2020/03/23 Python
在Keras中实现保存和加载权重及模型结构
2020/06/15 Python
Python基于gevent实现文件字符串查找器
2020/08/11 Python
英国最大的老式糖果店:A Quarter Of
2017/04/08 全球购物
ZINVO手表官网:男士和女士手表
2019/03/10 全球购物
阿联酋航空丹麦官方网站:Emirates DK
2019/08/25 全球购物
写一个用矩形法求定积分的通用函数
2012/11/08 面试题
有针对性的求职自荐信
2013/11/14 职场文书
自荐信需注意事项
2014/01/25 职场文书
护理学应聘自荐书范文
2014/02/05 职场文书
工会趣味活动方案
2014/08/18 职场文书
课外科技活动总结
2014/08/27 职场文书
公安局负责人查摆问题及整改方案
2014/09/27 职场文书
简历自荐信范文
2015/03/09 职场文书
音乐课《小猫钓鱼》教学反思
2016/02/18 职场文书
标会主持词应该怎么写?
2019/08/15 职场文书