【vue】Axios实现搜索

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src="./axios.min.js"></script>
</head>

<body>
    <div id="app">
        <select v-model="data.type">
            <option value="0">请选择</option>
            <option value="1">ID</option>
            <option value="2">标题</option>
        </select>
        <input type="text" v-model="data.content" placeholder="请输入搜索内容">
        <button @click="getData">搜索</button>

        <ul>
            <li v-for="(item,index) in data.dataList" :key="index">{{item}}</li>
        </ul>
    </div>

    <script type="module">
        import { createApp, reactive, ref, watch, computed } from './vue.esm-browser.js'
        createApp({
            setup() {
                const data = reactive({
                    type: "0",   //搜索类型
                    content: '',//搜索内容
                    dataList: []
                })
                //获取数据
                const getData = () => {
                    console.log('搜索类型', data.type, '搜索内容', data.content)
                    if (data.type == "1") {
                        let id = data.content
                        data.dataList = []
                        //get请求
                        axios.get(`http://127.0.0.1/api/getData/id/${id}`).then(res => {
                            console.log("获取数据:", res.data)
                            if (res.data.status == "succcess") {
                                data.dataList.push(res.data.data)
                            }
                        }).catch(err => {
                            console.log("错误", err)
                        })
                    } else if (data.type == "2") {
                        let param = {
                            title: data.content
                        }
                        //post请求
                        axios.post('http://127.0.0.1/api/postJson/research', param).then(res => {
                            console.log("获取数据:", res.data)
                            if (res.data.status == "succcess") {
                                data.dataList.push(res.data.data)
                            }
                        }).catch(err => {
                            console.log("错误", err)
                        })
                    }

                }
                return {
                    data,
                    getData
                }
            }
        }).mount("#app")
    </script>
</body>

</html>

参考

https://www.bilibili.com/video/BV1nV411Q7RX

相关推荐
慧一居士33 分钟前
flex 布局完整功能介绍和示例演示
前端
DoraBigHead35 分钟前
小哆啦解题记——两数失踪事件
前端·算法·面试
一斤代码6 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子6 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年6 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子7 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina7 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路8 小时前
React--Fiber 架构
前端·react.js·架构
coderlin_8 小时前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
伍哥的传说8 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js