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 相关文章推荐
Javascript UrlDecode函数代码
Jan 09 Javascript
js substr支持中文截取函数代码(中文是双字节)
Apr 17 Javascript
jquery $.each()使用探讨
Sep 23 Javascript
Javascript 按位取反运算符 (~)
Feb 04 Javascript
Jquery插件编写简明教程
Mar 25 Javascript
javascript如何判断输入的url是否正确
Apr 11 Javascript
学习javascript面向对象 javascript实现继承的方式
Jan 04 Javascript
网页中JS函数自动执行常用三种方法
Mar 30 Javascript
微信小程序 本地数据读取实例
Apr 27 Javascript
关于bootstrap日期转化,bootstrap-editable的简单使用,bootstrap-fileinput的使用详解
May 12 Javascript
微信小程序开发之左右分栏效果的实例代码
May 20 Javascript
Node.js中出现未捕获异常的处理方法
Jun 29 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
收音机鉴频器对声音的影响和频偏分析
2021/03/02 无线电
PHILIPS D1835/D1875的电路分析与打理
2021/03/02 无线电
php str_pad 函数使用详解
2009/01/13 PHP
PHP分页详细讲解(有实例)
2013/10/30 PHP
php图片处理函数获取类型及扩展名实例
2014/11/19 PHP
Prototype1.6 JS 官方下载地址
2007/11/30 Javascript
js有关元素内容操作小结
2011/12/20 Javascript
JQuery表格内容过滤的实现方法
2013/07/05 Javascript
JQuery的自定义事件代码,触发,绑定简单实例
2013/08/01 Javascript
jquery实现tr元素的上下移动示例代码
2013/12/20 Javascript
javascript浏览器窗口之间传递数据的方法
2015/01/20 Javascript
jquery实现经典的淡入淡出选项卡效果代码
2015/09/22 Javascript
jQuery插件实现静态HTML验证码校验
2015/11/06 Javascript
一步步教你利用Canvas对图片进行处理
2017/09/19 Javascript
解决小程序无法触发SESSION问题
2020/02/03 Javascript
uin-app+mockjs实现本地数据模拟
2020/08/26 Javascript
vue-cli3访问public文件夹静态资源报错的解决方式
2020/09/02 Javascript
[46:20]CHAOS vs Alliacne 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python中Django 后台自定义表单控件
2017/03/28 Python
在Python中使用AOP实现Redis缓存示例
2017/07/11 Python
简单易懂的python环境安装教程
2017/07/13 Python
Python工厂函数用法实例分析
2018/05/14 Python
python 去除txt文本中的空格、数字、特定字母等方法
2018/07/24 Python
python几种常用功能实现代码实例
2019/12/25 Python
Pandas时间序列基础详解(转换,索引,切片)
2020/02/26 Python
pycharm配置python 设置pip安装源为豆瓣源
2021/02/05 Python
html5 冒号分隔符对齐的实现
2019/07/31 HTML / CSS
汽车专业求职信
2014/06/05 职场文书
超市理货员岗位职责
2014/07/04 职场文书
领导班子整改方案
2014/10/25 职场文书
2015年春训学习心得体会范文
2015/03/09 职场文书
2015年度内部审计工作总结
2015/05/20 职场文书
高三毕业感言
2015/07/30 职场文书
2019年第四季度财务部门工作计划
2019/11/02 职场文书
Pytest之测试命名规则的使用
2021/04/16 Python
Python中zipfile压缩包模块的使用
2021/05/14 Python