首页vue翻译案例 csdn

vue翻译案例 csdn

时间: 2023-11-01 17:55:29 浏览: 103

以下是一个使用Vue实现的翻译案例： HTML文件： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue翻译案例</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> </head> <body> <div id="app"> <input type="text" v-model="text"> <button @click="translate()">翻译</button> <p>{{result}}</p> </div> </body> <script> var app = new Vue({ el: '#app', data: { text: '', result: '' }, methods: { translate() { // 调用百度翻译API进行翻译 axios.get('http://api.fanyi.baidu.com/api/trans/vip/translate', { params: { q: this.text, from: 'zh', to: 'en', appid: '你的appid', salt: '随机数', sign: '签名' } }).then(response => { this.result = response.data.trans_result[0].dst; }).catch(error => { console.log(error); }); } } }); </script> </html> ``` 在这个案例中，使用了Vue框架和axios库，通过调用百度翻译API实现了中英文翻译功能。用户在页面上输入要翻译的中文文本后，点击翻译按钮即可得到翻译结果。

阅读全文