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拖拽并简单保存的实现代码
Nov 28 Javascript
跨域请求之jQuery的ajax jsonp的使用解惑
Oct 09 Javascript
IE中jquery.form中ajax提交没反应解决方法分享
Sep 11 Javascript
js 获取input点选按钮的值的方法
Apr 14 Javascript
基于javascript实现图片左右切换效果
Jan 25 Javascript
AngularJS中$interval的用法详解
Feb 02 Javascript
Vue自定义指令介绍(2)
Dec 08 Javascript
Jquery实时监听input value的实例
Jan 26 Javascript
Angular4学习笔记router的简单使用
Mar 30 Javascript
详解React中传入组件的props改变时更新组件的几种实现方法
Sep 13 Javascript
vue里的data要用return返回的原因浅析
May 28 Javascript
JS获取当前时间的年月日时分秒及时间的格式化的方法
Dec 18 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
WordPress判断用户是否登录的代码
2011/03/17 PHP
破除一些网站复制、右键限制
2006/11/04 Javascript
使用js解决由border属性引起的div宽度问题
2013/11/26 Javascript
简要了解jQuery移动web开发的响应式布局设计
2015/12/04 Javascript
JavaScript正则表达式简单实用实例
2017/06/23 Javascript
JavaScript 程序错误Cannot use 'in' operator to search的解决方法
2017/07/10 Javascript
vue-awesome-swiper 基于vue实现h5滑动翻页效果【推荐】
2018/11/08 Javascript
webpack中如何使用雪碧图的示例代码
2018/11/11 Javascript
利用d3.js力导布局绘制资源拓扑图实例教程
2019/01/08 Javascript
js中call()和apply()改变指针问题的讲解
2019/01/17 Javascript
vue.js高德地图实现热点图代码实例
2019/04/18 Javascript
Vue使用Canvas绘制图片、矩形、线条、文字,下载图片
2019/04/26 Javascript
React+TypeScript+webpack4多入口配置详解
2019/08/08 Javascript
Net微信网页开发 使用微信JS-SDK获取当前地理位置过程详解
2019/08/26 Javascript
微信小程序中为什么使用var that=this
2019/08/27 Javascript
layui点击弹框页面 表单请求的方法
2019/09/21 Javascript
vue使用lodop打印控件实现浏览器兼容打印的方法
2021/02/07 Vue.js
Python 列表list使用介绍
2014/11/30 Python
用Python进行TCP网络编程的教程
2015/04/29 Python
详解python中xlrd包的安装与处理Excel表格
2016/12/16 Python
python中列表和元组的区别
2017/12/18 Python
Python写一个基于MD5的文件监听程序
2019/03/11 Python
手把手教你使用Python创建微信机器人
2019/04/29 Python
Python定义一个Actor任务
2020/07/29 Python
Python 整行读取文本方法并去掉readlines换行\n操作
2020/09/03 Python
python Selenium 库的使用技巧
2020/10/16 Python
Pycharm配置lua编译环境过程图解
2020/11/28 Python
Python try except else使用详解
2021/01/12 Python
简单掌握CSS3中resize属性的用法
2016/04/01 HTML / CSS
html5调用app分享功能示例(WebViewJavascriptBridge)
2018/03/21 HTML / CSS
医学专业大学生求职的自我评价
2013/11/27 职场文书
教育课题研究自我鉴定范文
2013/12/28 职场文书
优秀演讲稿范文
2013/12/29 职场文书
十佳少先队员演讲稿
2014/09/12 职场文书
家庭暴力离婚起诉书
2015/05/18 职场文书
详解SQL的窗口函数
2022/04/21 Oracle