网站备案代码如何加到,驻马店住房和城乡建设厅网站,国际新闻最新,php网站开发报价目录
1、组件代码
2、组件代码
3、调用页面
4、展示 前言#xff1a;使用uniapp调用一个在线单词翻译功能 1、组件代码 2、组件代码
YouDaoWordTranslator
templateview classtranslatorinput classipttext typete…目录
1、组件代码
2、组件代码
3、调用页面
4、展示 前言使用uniapp调用一个在线单词翻译功能 1、组件代码 2、组件代码
YouDaoWordTranslator
templateview classtranslatorinput classipttext typetext v-modelquery placeholder请输入单词 /!-- button clickfetchData查询/button --view classshowblock v-ifresult.lengthtext classshowtext v-for(item, index) in result :keyindex解释 {{ index 1 }}: {{ item }}/text/view/view
/templatescript setup
import { api } from ../../config/settings;
import { ref, watch } from vue;const query ref();
const result ref([]);const fetchData () { const url api.defineword ?q query.value; console.log(url);uni.request({url: url,method: GET,header: {Content-Type: application/json},success: (res) {console.log(响应数据:, res);if (res.statusCode 200 res.data res.data.data res.data.data.entries) {// 获取entries数组中每个元素的explain属性并存放到result数组中result.value res.data.data.entries.map(item item.explain);console.log(result.value);} else {console.error(请求失败或数据格式不正确:, res);}},fail: (err) {console.error(请求失败:, err);}});
};// 监听查询字符串的变化以便在输入时自动调用fetchData
watch(query, (newQuery) {if (newQuery) {fetchData();} else {// 当输入框内容为空时清空结果数组result.value [];}
});
/scriptstyle scoped
/* 你的样式 */
.ipttext {margin-top: 10rpx;height: 50rpx;margin-bottom: 10rpx;
}
.showblock {background-color: azure;
}
/style
3、调用页面
wordTranslator
templatetranslator /
/templatescript setup
import Translator from /components/YouDaoWordTranslator/YouDaoWordTranslator.vue;/script
4、展示
