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 火狐(firefox)不显示本地图片问题解决
Jul 05 Javascript
javascript fullscreen全屏实现代码
Apr 09 Javascript
js下利用控制器载入对应脚本
Jul 17 Javascript
jQuery的ready方法详解
Nov 27 Javascript
使用jquery动态加载js文件的方法
Dec 24 Javascript
DOM操作一些常用的属性汇总
Mar 13 Javascript
JS/Jquery判断对象为空的方法
Jun 11 Javascript
基于jquery实现简单的手风琴特效
Nov 24 Javascript
简易的JS计算器实现代码
Oct 18 Javascript
JavaScript如何对图片进行黑白化
Apr 10 Javascript
JS回调函数原理与用法详解【附PHP回调函数】
Jul 20 Javascript
javascript全局自定义鼠标右键菜单
Dec 08 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
多文件上传的例子
2006/10/09 PHP
PHP实现下载功能的代码
2012/09/29 PHP
PHP获取php,mysql,apche的版本信息示例代码
2014/01/16 PHP
PHP获取远程图片并保存到本地的方法
2015/05/12 PHP
PHP嵌套输出缓冲代码实例
2015/05/12 PHP
php类常量用法实例分析
2015/07/09 PHP
Thinkphp开发--集成极光推送
2017/09/15 PHP
PHP实现的折半查询算法示例
2017/10/09 PHP
ie和firefox中img对象区别的困惑
2006/12/27 Javascript
动态修改DOM 里面的 id 属性的弊端分析
2008/09/03 Javascript
jQuery随便控制任意div隐藏的方法
2013/06/28 Javascript
jQuery+css实现的tab切换标签(兼容各浏览器)
2016/01/28 Javascript
拥Bootstrap入怀——导航栏篇
2016/05/30 Javascript
Angularjs使用directive自定义指令实现attribute继承的方法详解
2016/08/05 Javascript
深入理解JavaScript创建对象的多种方式以及优缺点
2017/06/01 Javascript
jQuery实现点击下拉框中的值累加到文本框中的方法示例
2017/10/28 jQuery
利用nvm管理多个版本的node.js与npm详解
2017/11/02 Javascript
微信小程序实现横向增长表格的方法
2018/07/24 Javascript
vue-cli3.0配置及使用注意事项详解
2018/09/05 Javascript
vue 使用element-ui中的Notification自定义按钮并实现关闭功能及如何处理多个通知
2019/08/17 Javascript
一步一步实现Vue的响应式(对象观测)
2019/09/02 Javascript
详解Nuxt.js中使用Element-UI填坑
2019/09/06 Javascript
Python闭包的两个注意事项(推荐)
2017/03/20 Python
Python+树莓派+YOLO打造一款人工智能照相机
2018/01/02 Python
详解Python中的内建函数,可迭代对象,迭代器
2019/04/29 Python
python跳出双层for循环的解决方法
2019/06/24 Python
python 字符串常用方法汇总详解
2019/09/16 Python
python 实现视频 图像帧提取
2019/12/10 Python
利用Python的folium包绘制城市道路图的实现示例
2020/08/24 Python
Python 中如何写注释
2020/08/28 Python
Python Http请求json解析库用法解析
2020/11/28 Python
如何编写python的daemon程序
2021/01/07 Python
幼儿园儿童节主持词
2014/03/21 职场文书
2019最新婚庆对联集锦!
2019/07/10 职场文书
基于Python实现流星雨效果的绘制
2022/03/18 Python
MySQL中JOIN连接的基本用法实例
2022/06/05 MySQL