一个土味情话生成器组件

原创已于 2024-04-21 15:31:14 修改 · 902 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue #typescript

于 2024-04-21 15:24:03 首次发布

1、使用axios请求

2、为了简洁美观使用了连续结构复制+重命名

<template>
    <div class="talk">
        <button @click="getLoveTalk">获取一句土味情话</button>
        <ul>
            <li v-for="talk in talkList" :key="talk.id">{{ talk.title }}</li>
        </ul>
    </div>
</template>

<script setup lang="ts" name="LoveTalk">
import { reactive } from 'vue';
import axios from 'axios';
import { nanoid } from 'nanoid';
//数据
let talkList =reactive([
    {id:'01',title:'今天你有点怪，哪里怪，怪好看的！'},
    {id:'02',title:'草莓、蓝莓、蔓越莓，今天想我了没？'},
    {id:'03',title:'心里给你留了一块地，我的死心塌地。'},
])
//方法
async function getLoveTalk (){
    //发请求,下面这行的写法是连续解构赋值+重命名
    let {data:{content:title}} = await axios.get('https://api.uomg.com/api/rand.qinghua?format=json')
    //把请求回来的字符串，包装成一个对象
    let obj ={id:nanoid(),title}
    //放到数组中
    talkList.unshift(obj)
}
</script>

<style scoped>
 .talk{
    background-color: orange;
        padding: 10px;
        border-radius: 10px;
        box-shadow: 0 0 10px;
 }
</style>